Create a zebra striped table with CSS3

Creating a striped table is easy with CSS3's nth-child selector. 

This snippet allows you to seperately choose the background colours for odd and even rows:

table tr:nth-child(odd)
{
    background-color:#eee;
}

table tr:nth-child(even)
{
    background-color:#ddd;
}

You can seperately syle the headings by using 'th' tags to replace the 'tr' tags. 

table th
{
    background-color:#bbb;
    border-bottom:1px solid #666;
}

Demo

MonTueWedThuFriSatSun
09:00 09:00 09:00 09:00 09:00 09:00 09:00
10:00 10:00 10:00 10:00 10:00 10:00 10:00
11:00 11:00 11:00 11:00 11:00 11:00 11:00
12:00 12:00 12:00 12:00 12:00 12:00 12:00
13:00 13:00 13:00 13:00 13:00 13:00 13:00

Coveloping nth-child tester

To see some more examples of using nth-child with a live preview, check out this handy tool from coveloping.com.

Sign Up
comments powered by Disqus
Sign Up

Popular Tags

350x250

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.