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 FacebookGoogle+Tweet about this on TwitterShare on LinkedIn

Leave a Reply