html - 选择框溢出 td

Question

在我的表中，我有一些带有一些选择框的 td。用户点击的那个变成了一个真正的选择框（size="n"）而不是下拉菜单。

但我不希望桌子 td 改变它的高度。

<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

这是工作解决方案

的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

我不确定表格标签。我认为这可以使用 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>