Simple Table Zebra Striping with CSS3

HTML Table with CSS Zebra Striping, Alternating Row ColorsZebra Striping – the name given to having alternating background colors on every other row or column, is a very simple task with CSS3’s Nth Child Pseudo-classes.

It wasn’t always so easy, especially if you did not (or could not) do it manually. Luckily we don’t have to worry about that, as we now have the ability to style every odd or evened numbered sibling elements.

So get your tables ready and take a look at just how easy this is. Below is the CSS for the table in the image shown above.

The CSS – Striping Every Other Row

/* This is the style for our default (even) row */

tr {
  background-color: #FFF;
}

/* This is the style for our striped (odd) row */
tr:nth-child(odd) {
  background-color: #B3BAC7;
}

That’s all it takes! You can use the Nth-Child Pseudo-Class on elements besides table rows too. Styling list-items <li> and definition list-items <dt> and <dd> might also be an interesting endeavour.

About: Kurt Maine

Kurt Maine is a Full-Stack Web Developer with a passion for frontend Node.js frameworks like Angular, and backend frameworks like Ruby on Rails, and the PHP framework Symfony.


Leave a Reply

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