Reputation: 1225
I can't seem to find a way to do this without using Javascript.
Let's say I have a <table>
, and I don't know the potential width of the content that populates the first column. The <table>
has width:100%
so that the rest of the columns can resize as neccssary, but I'd like to keep the first column with a fixed width so that it doesn't grow larger than the content.
Is this possible without Javascript?
<table>
<tr>
<th>Dynamic content column of unknown width</th>
<th>Some other column that is allowed to grow/shrink</th>
</tr>
<tr>
<td>Lorem ipsum ...</td>
<td>195383 ...</td>
</tr>
</table>
Upvotes: 3
Views: 3981
Reputation: 1225
It seems that by setting the width of the dynamic content column to 1px
, the column width will be fixed to the width of the content in the column, and still allow the other column to grow/shrink with the table.
Upvotes: 4
Reputation: 19367
To set a fixed width for the first column:
tr th:first-child, tr td:first-child {
width: 200px;
}
Upvotes: 0