Grow your CSS skills. Land your dream job.

Last updated on:

CSS3 Zebra Striping a Table

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

Comments

  1. great certainly saved me some time searching

  2. 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…

  4. @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. 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. 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. Permalink to comment#

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

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

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".