Reputation: 3465
(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).
Is there a way to do it, if possible without Javascript?
Upvotes: 3
Views: 426
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