How can I make my HTML table be 100% wide AND have all of its cells only be as wide as their contents?

Question

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?

Answer 1

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?

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

<table style="width: 100%; background: grey; color: white;">
     <tr>
         <td style="background: red;">Content</td>
         <td style="background: green;">Content</td>
         <td style="background: blue; width: 100%;">Content</td>
     </tr>
</table>

See http://jsfiddle.net/9bp9g/