CSS - Browser independent column styling

Styling on a column level can be a really powerful tool to create great looking tables. I'm no designer, so I can't show you how to create great looking columns, but I can show you the points of attack.

By using only "one point of attack" in the markup per column makes for leaner pages. By that, I mean that you could put a class on each td (first, second, etc) on every row, but that isn't really necessary, and with big tables, big html.

Internet Explorer supports a lot of styling opportunities with the colgroup element. With Firefox and Opera (not sure about Safari), you can only apply a handful of styles using this element, but on the other hand, they fully support CSS 2.1 which has some really powerful selectors.

Example of unstyled columns

Styling for < IE 7

I have three colgroups, one for each column. The first for column one, second for...
<colgroup id="name" />
<colgroup id="address" />
<colgroup id="guild" />

Using the CSS 1 id selector, #, it's quite easy to style columns in older IE browsers:
#name { font-weight: bold; width: 200px; background: #eee; }
#address { width: 150px; color: #888; }
#guild { font-style: italic; }

Example of styling using colgroup

Styling for modern browsers (FF, Opera, Safari)

To get a reference to specific columns, I use the :first-child selector, and the adjacent sibling selector.

First column in the table body (the table has id="css21"):
#css21 tbody td:first-child { font-weight: bold; width: 200px; background: #eee; }

Second column:
#css21 tbody td:first-child + td { width: 150px; color: #888; }

Third column:
#css21 tbody td:first-child + td + td { font-style: italic; }

For more columns, simply add + td per column.

Example of styling using CSS 2.1

The CSS combined

#name { font-weight: bold; width: 200px; background: #eee; }
#css21 tbody td:first-child { font-weight: bold; width: 200px; background: #eee; }

#address { width: 150px; color: #888; }
#css21 tbody td:first-child + td { width: 150px; color: #888; }

#guild { font-style: italic; }
#css21 tbody td:first-child + td + td { font-style: italic; }

Example using both colgroup and CSS 2.1 styling

The reason for the redundancy is that IE6 seem to ignore styles that uses the above CSS 2.1 selectors, instead of ignoring the selector.

This would be ignored by IE6:
#guild, #css21 tbody td:first-child + td + td { font-style: italic; }

To remove the redundancy from the rendering engine of the browser, you could exploit the star html bug in pre IE 7 browsers. Add * html before each colgroup-styling. Then the rendering engines of IE 6 and older browsers see those styles, whereas modern browsers only see the CSS 2.1 selector styles.

Example:
/* Only visible to pre IE 7 */
* html #guild { font-style: italic; }
/* For modern browsers */
#css21 tbody td:first-child + td + td { font-style: italic; }

Great CSS 2.1 information

456 Berea Street CSS Selectors Part 1
456 Berea Street CSS Selectors Part 2
456 Berea Street CSS Selectors Part 3

Comments, critique, etc. are as always appreciated!