选择框溢出td

Question

在我的表中，我有一些选择框的td。 用户点击的那个变成了一个真正的选择框（大小=“n”）而不是下拉列表。

但是我不想在桌子上改变它的高度。

<table><tr>
    <td>
    <select size="1">
        <option>one</option>
        <option>two</option>
        <option>duck</option>
    </select>
    </td>

    <td>
    <select size="1">
        <option>one</option>
        <option>two</option>
    </select>
    </td>

    <td>
    <select size="5">
        <option>one</option>
        <option>two</option>
        <option>yes</option>
        <option>batman</option>
        <option>chewing gum</option>
    </select>
    </td>

    <td>
    <select size="1">
        <option>one</option>
        <option>two</option>
        <option>monitor</option>
    </select>
    </td>
</tr></table>

例如：它看起来如何：

我想要的是什么：

Answer 1

以下是 WORKING SOLUTION

HTML：

<div class="back">
<table border="0"><tr>
    <td>
    <select size="1">
        <option>one</option>
        <option>two</option>
        <option>duck</option>
    </select>
    </td>

    <td>
    <select size="1">
        <option>one</option>
        <option>two</option>
    </select>
    </td>

    <td>
    <select size="5">
        <option>one</option>
        <option>two</option>
        <option>yes</option>
        <option>batman</option>
        <option>chewing gum</option>
    </select>
    </td>

    <td>
    <select size="1">
        <option>one</option>
        <option>two</option>
        <option>monitor</option>
    </select>
    </td>
</tr></table>
</div>

CSS：

td{vertical-align:top;}
.back{background:green; height:28px; display:inline-block}

希望这有帮助。

PS：我采用了绿色背景而不是粉红色。你可以替换它。

Answer 2

表格在溢出时有点奇怪。您不能像设置正常的块级元素一样设置固定高度和溢出可见。

我能想到的唯一解决方案是将您选择绝对，将其从流程中取出，并将其放置在您希望它所在的单元格顶部。您必须为此设置宽度但是，因为它在技术上会变空，并且根本没有宽度。

实现这一目标的css看起来像这样：

td { 
    position: relative;
    min-width: 100px;
}
td select[size="5"] {
    position: absolute;
    top: 0;
    left: 0;
}

一个小提琴演示： http://jsfiddle.net/xRav2/

Answer 3

我不确定Table标签。我认为这可以使用DIV标签实现，如下所示：

<style> div{ border:1px solid #000;float:left;} </style>
<div>
<div><select size="1">
        <option>one</option>
        <option>two</option>
        <option>duck</option>
    </select>
</div>
    <div>
    <select size="1">
            <option>one</option>
            <option>two</option>
        </select>
    </div>
    <div>
    <select size="5">
            <option>one</option>
            <option>two</option>
            <option>yes</option>
            <option>batman</option>
            <option>chewing gum</option>
        </select>
    </div>
    <div>
    <select size="1">
            <option>one</option>
            <option>two</option>
            <option>monitor</option>
        </select>
    </div>
    <div>
     <select size="1">
            <option>one</option>
            <option>two</option>
            <option>monitor</option>
        </select>
    </div>
</div>