Robby75
Robby75

Reputation: 3465

How to make a table cell use overflow hidden?

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

Upvotes: 3

Views: 426

Answers (2)

Stickers
Stickers

Reputation: 78796

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>

Upvotes: 2

Viktor Maksimov
Viktor Maksimov

Reputation: 1465

Use this style for the select:

select { width: 100px; }

Upvotes: 0

Related Questions