CSS3 and Alternating Rows

Playing around with HTML this morning, I learned about new CSS3 selectors that handle an all-too-common requirement: setting a background colour for alternate rows in a table.

The following CSS3 selector seems perfect:

Edit: Mike points out that I originally misspelled “color”; I’ve fixed that, now.

table.alternating tr:nth-child(odd) {
  background-color: #D5E8D2;
}
table.alternating tr:nth-child(even) {
  background-color: #D8DFEE;
}

And you’d use it like this:

<table class="alternating">
  <tr>
    <td>First row</td>
  </tr><tr>
    <td>Second row</td>
  </tr>
</table>

That’s a lot cleaner than pretty much any solution I’ve seen (with the possible exception of server-generated solutions).

As is so often the case with these things, however, it’s only supported on the most modern browsers. (Of course IE isn’t even in the running; don’t be silly!) Firefox 3.1 (and the newer 3.5) support it, though.

Alternating Row Colours

It's only fair to share...
Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Leave a Reply