如何使表格单元格使用溢出隐藏？

Question

（我不能使用table-layout:fixed 因此问题Why does overflow:hidden not work in a ? 不回答这个问题）

我有一张简单的桌子：

<table>
    <tr>
        <td width="100%">main content</td>
        <td style="overflow: hidden;">
            <select name=x>
                <option value=0 selected>A very, very, very, very, very long text in a selection box</option>
            </select>
        </td>
    </tr>
    <tr>
        <td width="100%"></td>
        <td>other content</td>
    </tr>
</table>

基本上，表格应该为“主要内容”提供所有可用空间，并且只使用“其他内容”需要的空间。选择小部件不应导致列增长，而应溢出到隐藏状态。

很遗憾，这不起作用（在 Chrome 和 Mozilla 中测试）。

JSFiddle

有没有办法在没有 Javascript 的情况下做到这一点？

Answer 1

如果“其他内容”总是很短，可以试试white-space:nowrap。并根据需要将min-width 设置为select。

select {
    width: 100%;
    /* min-width: 100px; */
}
td:nth-child(2) {
    white-space: nowrap;
}

<table>
    <tr>
        <td width="100%">main content</td>
        <td>
            <select name=x>
                <option value=0 selected>A very, very, very, very, very long text in a selection box</option>
            </select>
        </td>
    </tr>
    <tr>
        <td width="100%"></td>
        <td>other content</td>
    </tr>
</table>

Answer 2

使用此样式进行选择：

select { width: 100px; }