Alternating Table Row Colors

Over the years I’ve used a number of different methods to paint alternating rows in a table with different background colors.  Rather than using some inelegant scripting approach or, god forbid, writing them manually, there is a succinct CSS solution.  First, two rules–one for even rows and one for odd rows:

table.alternate tr:nth-child(odd) {
	background-color: #888888;
}

table.alternate tr:nth-child(even) {
	background-color: #BBBBBB;
}

and then the alternate class can simply be applied to any table, like so:

Each row will automatically take on the properties of the corresponding rule, depending on whether it is even or odd.

This entry was posted in CSS, HTML and tagged , , , . Bookmark the permalink.
  • Delicious
  • Facebook
  • Reddit
  • StumbleUpon
  • Twitter
  • RSS Feed
  • Google
  • Digg

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>