What do you want to learn today?
Treehouse is the best place to learn web design, web development, and iOS.

Code Snippet

Home » Code Snippets » CSS » CSS3 Zebra Striping a Table

CSS3 Zebra Striping a Table

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

Subscribe to The Thread

  1. Chris Lloyd

    great certainly saved me some time searching

    Reply ↓
  2. Dyllon

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

    Reply ↓
    • Dalibor Sojic

      CSS3 zebra striping is better solution! Why? Here is the right concept:

      1. PHP generates html as output, which should not care how the elements looks like.
      2. CSS purpose is to “care” how the elements looks like.

  3. Artem

    Cant understand, how it works…

    Reply ↓
  4. mike ilz

    @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/

    Reply ↓
  5. ModuLIZER

    Sadly… not supported by IE

    Reply ↓
  6. John

    Can be done with jQuery addClass.

    Reply ↓
  7. Maksvil

    shitty explorer not supported

    Reply ↓
  8. mcometa

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

    Reply ↓
  9. Drew

    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.

    Reply ↓
  10. Tim Smith

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

    Reply ↓
  11. Sebastian Kolind Sørensen

    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.

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~