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

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

将此样式用于选择：

userinput = inputdlg('Enter the code here:');