Can I set the column width for all but first column using CSS?
+1
A:
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)
Soufiane Hassou
2009-11-12 06:50:55
Interesting idea, haven't seen much of CSS3 - looks like `not()` isn't supported by any of the IE current versions (6, 7 or 8). Could you combine `not()` with `:first-child`? Something like `td:not(:first-child)`? If so, that'd avoid the need for a new class.
Dominic Rodger
2009-11-12 06:54:55
+1
A:
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).
Dominic Rodger
2009-11-12 06:51:01
Since I wanted the width of the first col to be auto, I tried the following based on your idea:table tr td { width: 20em; }table tr td:first-child { width: auto; }Is that correct? It sometimes is wrapping the contents of the first column now unexpectedly.
KalEl
2009-11-12 06:56:13
@KalEl, yes. The default value of `width` is `auto`, so that looks good to me, unless it was previously getting `width` from somewhere else. It might be worth removing those two rules, and double checking what value cells in the first column were getting for `width` using Firebug or some other CSS debugging tool.
Dominic Rodger
2009-11-12 07:00:12