The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

CSS3 Zebra Striping a Table

Last updated on:
tbody tr:nth-child(odd) {
   background-color: #ccc;


  1. Chris Lloyd
    Permalink to comment#

    great certainly saved me some time searching

  2. Dyllon
    Permalink to comment#

    this didn’t work well for me, but the PHP one worked great.

  3. Artem
    Permalink to comment#

    Cant understand, how it works…

    • Pancho
      Permalink to comment#

      tbody tr:nth-child(odd)
      basically you select every odd numbered tr of tbody
      something like
      so it doesn’t matter how many rows the table has it will always have one colored row and one white row after that.

  4. mike ilz
    Permalink to comment#

    @Dyllon and @Artem, here is a simple demo explaining how to use this code, and a live example of it being used.

  5. ModuLIZER
    Permalink to comment#

    Sadly… not supported by IE

  6. John
    Permalink to comment#

    Can be done with jQuery addClass.

  7. Maksvil
    Permalink to comment#

    shitty explorer not supported

  8. mcometa

    I bet these people saying that it isn’t working are browsers that are not supported. :D

  9. Drew
    Permalink to comment#

    Just wanted to say thanks for all of the cool tips and tricks. I’ve used the css zebra stripe trick before but it hadn’t occurred to me to prefix my css with tbody so that I could better target hovers and such.

  10. Tim Smith
    Permalink to comment#

    How do you maintain a consistent zebra pattern in a sortable PHP table?

  11. Sebastian Kolind Sørensen
    Permalink to comment#

    This is awesome, sadly it’s not working in IE. Therefore I am using the PHP or jQuery way, until IE wakes up and shuts down that terrible browser.

  12. openriot
    Permalink to comment#

    Great, thank you!

  13. Katie
    Permalink to comment#

    I want to use this but I have tables inside my table rows, does anyone know a way I can have it skip the nested rows/columns? Thanks!

  14. Ramesh Chowdarapally
    Permalink to comment#

    I think it will not support internet explorer,
    but it is useful.

  15. Attila
    Permalink to comment#

    In response to being able to use jQuery it also adds a lot of classes, (if its scaled up and there’s hundreds of rows) it would add a lot of classes. and in turn couldn’t that eventually create bloat code or even slow down the page? (not a lot but a little) and so i guess chris just wanted to use the most efficient way of using the code, or maybe just first one that came to mind or just preference. Just a thought :)

  16. bonyiii
    Permalink to comment#

    For my case this is perfect.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed