After reading an article over at the SiteCrafting Blah Blah Blog about different ways to alternate table row colors, it occurred to me that the nth-child approach was not mentioned.  Way back in 2004 I had implemented a ridiculous (hindsight is 20/20) proof-of-concept around implementing tables without using the <table> tag.  However ridiculous the prototype might have been, one touch I added was the use of the nth-child pseudo-class to display alternating table rows in a different color.  Here’s what I wrote about that at the time:

This rule is actually a part of the CSS3 selector set, and if your browser was capable of rendering it correctly (I’m willing to bet it isn’t, at least at the time of posting) you’d see alternate background colors on the table rows (alternating between white and light gray).

Remembering that old proof-of-concept today, I decided to have another look at it.  I was disappointed to find that even in the latest version of Firefox (version 3), over four years later, the alternating row colors were nowhere to be found.  I was happy to see, though, that the latest versions of Opera (9.51 at the time of writing) and Safari (3.1.2 at the time of writing) actually do display the alternating table row colors.  As one might guess, IE7 falls in the Firefox camp on this one.

It’s unfortunate that only half of the major players support this useful feature, but I’m guessing we’ll see support added in Firefox 3.1, of which there is a first alpha targeted for release at the end of this month, since that particular release is meant to include a slew of CSS support geared toward Acid3 compliance.  Furthermore, one can hope nth-child support will show up in IE8, but that may be the least likely scenario between the two.

Tags: , , , , , , , , , , , ,