CSS3 Zebra Striping a Table

tbody tr:nth-child(odd) {
   background-color: #ccc;
}

Comments

  1. User Avatar
    Chris Lloyd
    Permalink to comment#

    great certainly saved me some time searching

  2. User Avatar
    Dyllon
    Permalink to comment#

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

  3. User Avatar
    Artem
    Permalink to comment#

    Cant understand, how it works…

    • User Avatar
      Pancho
      Permalink to comment#

      tbody tr:nth-child(odd)
      basically you select every odd numbered tr of tbody
      something like
      tbody
      ->tr(selected)
      ->tr
      ->tr(selected)
      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. User Avatar
    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.

    http://webdesignandsuch.com/2010/08/add-zebra-striping-to-a-table-with-css3/

  5. User Avatar
    ModuLIZER
    Permalink to comment#

    Sadly… not supported by IE

  6. User Avatar
    John
    Permalink to comment#

    Can be done with jQuery addClass.

  7. User Avatar
    Maksvil
    Permalink to comment#

    shitty explorer not supported

  8. User Avatar
    mcometa

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

  9. User Avatar
    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. User Avatar
    Tim Smith
    Permalink to comment#

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

  11. User Avatar
    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.

    • User Avatar
      Dino
      Permalink to comment#

      I AM A VOICE FROM YOUR FUTURE it is now 2016 and it is still NOT shut down!

  12. User Avatar
    openriot
    Permalink to comment#

    Great, thank you!

  13. User Avatar
    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. User Avatar
    Ramesh Chowdarapally
    Permalink to comment#

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

  15. User Avatar
    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. User Avatar
    bonyiii
    Permalink to comment#

    For my case this is perfect.

  17. User Avatar
    Steven Lilley
    Permalink to comment#

    Thank you for such a succinct solution. :-)

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag