Styling table columns

The Colgroup element has existed for quite some time now. Its purpose is column grouping. It’s also in the class of under used elements. With Colgroup each column can be styled individually in a way similar to how we style table rows. Unfortunately most of todays browsers do not fully support the styling capabilities of Colgroup. FF2 only allows you to style the width and background-color properties whereas IE7 allows anything. Admittedly IE7 is the winner here. You can pretty much give a Colgroup element any style and IE7 will happily apply it to the table. Take a look at this basic Colgroup example and compare the difference between FF2 and IE7.

It’s quite dis-heartening news. However, there is a workaround. And it’s in the form of valid CSS. The adjacent sibling selector (+) could be used to select the nth cell of a table row. 99% of the time we’d be dealing with fixed column data. Therefore we could programatically retreive the correct column to style on a per row basis. Take the following example. To select the second column we’d do:

td:first-child+td {
  put your column style here...
}

Now to select the fifth column just carry on with the plus’:

td:first-child+td+td+td+td {
  put your column style here...
}

It’s not elegant, I know, but the beauty of this approach is that both FF2 and IE7 supports both + and first-child selectors. And as far as I’m aware the latest MOS browsers do too.

Note: IE6 does not understand any of the things I’ve mentioned here so please do take this article with a pinch of salt until IE6 is completely phased out.

Comments are closed.