Table column width as narrow as contained data?

Question

I have three columns. The last two I want to make as narrow as the their contained data and the first column can take the rest of the width (table has 100% width).

How can you do this using css? Right now the columns on the right look silly with extra space. Ideas?

Answer 1

Just give the first column a width of 100% and if necessary give the cells in all other columns a white-space: nowrap to avoid their content being wrapped (again, only if necessary).

E.g.

<table>
    <tr><td class="first">first</td><td>second</td><td>third</td></tr>
    <tr><td class="first">first</td><td>second</td><td>third</td></tr>
    <tr><td class="first">first</td><td>second</td><td>third</td></tr>
</table>

with

table { width: 100%; }
table td.first { width: 100%; }

Or the modern way if you don't bother about IE6 users:

table { width: 100%; }
table td:first-child { width: 100%; } 

(so that you can remove class="first")