How to make a table cell use overflow hidden?

Question

(I cannot use table-layout:fixed therefore question Why does overflow:hidden not work in a ? does NOT answer this question)

I have a simple table:

<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>

Basically, the table should give all available space to "main content" and only use as much space as "other content" needs. The selection widget should not cause the column to grow and should instead overflow into hidden.

Unfortunately that does not work (tested in Chrome and Mozilla).

JSFiddle

Is there a way to do it, if possible without Javascript?

Answer 1

If the "other content" is always short length, you can try white-space:nowrap. And set a min-width to select as needed.

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

Use this style for the select:

select { width: 100px; }