选择框溢出 td答案

【问题标题】：select-box overflowing a td选择框溢出 td
【发布时间】：2013-07-05 20:41:21
【问题描述】：

在我的表中，我有一些带有一些选择框的 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>

例如：它的外观：

我想要什么：

【问题讨论】：

标签： html css select overflow html-table

【解决方案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：我用的是绿色背景而不是你的粉红色。你可以替换它。

【讨论】：

不是现在。这是更新的小提琴。 jsfiddle.net/dCzDE/2 - @PeterVR
同意，但现在不再像一张桌子了。您也可以删除所有 tbale 标记并使用 span 的然后...jsfiddle.net/dCzDE/3

【解决方案2】：

当涉及到溢出时，表格的工作有点奇怪。你不能只设置一个固定的高度和一个可见的溢出，就像你对普通块级元素所做的那样。

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

实现这一点的 css 如下所示：

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

还有一个要演示的小提琴： http://jsfiddle.net/xRav2/

【讨论】：

【解决方案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>

【讨论】：