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

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>