I have this grid:
If I change the tables width from 100% to auto, table collapses horizontally.
Which is not desirable. How can I make the table columns (td elements) shrink automatically to fit their content, while at the same time, the table, and tr elements fill the entire space of their parent?
Best Answer
<table>
and<tr>
elements are as wide as the<td>
elements inside of them. You can’t have every<td>
be as small as its contents and have the table as a whole be as wide as the space available, because the table can only be as wide as the cells inside it.(i.e. unlike most HTML elements,
<table
> elements can’t be sized independently from their contents.)You can set one cell to be as wide as possible though, by giving it a width of
100%
:See http://jsfiddle.net/9bp9g/