HTML Table: Set width for second column onwards using CSS

Question

Can I set the column width for all but first column using CSS?

Answer 1

HTML tables don't really have "columns" - rows just have first cells, at least as far as markup is concerned. However, you could do something like with CSS selectors:

Given the following markup:

<table>
  <tr><td>foo</td><td>bar</td><td>bar 2</td></tr>
  <tr><td>foo</td><td>bar</td><td>bar 2</td></tr>
  <tr><td>foo</td><td>bar</td><td>bar 2</td></tr>
  <tr><td>foo</td><td>bar</td><td>bar 2</td></tr>
</table>

CSS:

table tr td             { width: 20em; }
table tr td:first-child { width: 10em; }

This would set the width of the first "column" to 10em, and all other columns to 20em.

You might want to consider browser support for :first-child though. The alternative is adding a class to the first <td> in every <tr> (it appears to be supported by pretty well every major browser other than IE6).