HTML Table: Set width for second column onwards using CSS

Can I set the column width for all but first c开发者_高级运维olumn using CSS?

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).

Either of these would work:

td:not(:first-child) {
    width: 20%;
}

td:nth-child(n+2) {
    width: 20%;
}

Both examples work in IE9+

Demo

Using CSS2.1, I'm not aware of any possible selector to do it.

However, CSS3 has a not() selector, so if you give your first column a class, you can use a selector td:not(.your_class)