Styling Columns In Very L-o-o-o-n-n-n-g Tables

[tedster]

I feel like I'm missing an obvious solution on this.

I have some long tabular data -- 14 columns and many hundreds of rows. So I'll break it into several tables.

In order to make it easy to reference specific information I want to color code the background for 9 very narrow columns - they just contain an "X" or a non-breaking space.

All I can figure is that I need 9 classes, and then apply those classes in every single row -yeccch! Isn't there a more efficient way to do this?

[MCookie]

rowspan is about the only option I guess.. for the rows with the non-breaking space.

[moonbiter]

If you are targeting modern browsers you can use the col [htmlhelp.com] and colgroup [htmlhelp.com] elements to define classes on columns. Beware the layering order [w3.org], however -- you want to make sure that the proper table cells are transparent.

<edit>
I just tested this. Sadly, Mozilla and Opera both fall down on this point, not applying background styles to cols or colgroups. And IE will (incorrectly) destroy the style set by these elements if you explicitly set a transparent background for table cells. So it looks like you are limited to styling the tds individually.

[zazen]

Another possibility could be just 2 different classes:
.a {background: gray}
.b {background: white}
avoiding too many colors in the view.

[tedster]

All good input, even if the verdict is that I'm kind of stuck - thanks.

Mcookie - if I could depend on ALL the rows to be just 1 line, this might work well. But the other rows have indefinite amounts of information, so things could get skewed depending on the screen resolution.

moonbiter - yes, I've been testing colgroup and col ever since the W3C created the recommendation - but browser support is SOOO bad, as you've discovered.

zazen - I get what you're saying and it would help a bit. However, this is a consumer site, and I have such a nice 9 color palette to use that I just can't pass it up.

[rewboss]

I'm not sure I completely understand what you're after, but it seems you want narrow columns to visually divide the table in order to make it easier for the user to keep track of which column is which -- but you don't know how many rows there will be?

There is an interesting little hack, and it actually takes advantage of W3C specs: namely, that browsers should not create extra rows if a rowspan would extend a column past the end of a table.

In other words, if you specify a rowspan of 100 for one cell, but only actually define 10 rows, the browser is not to create an extra 90 rows.

So you can define your vertical dividers to have a rowspan at least equal to the maximum number of rows you expect to have in your table and know that they will always be exactly the right height.

<edit>
Okay, that's not what you want -- I've just re-read your original post. But it's a useful trick, anyway. :)
</edit>