Zebra striped tables using CSS

Turn any table to zebra striped tables!

Zebra rows

Change background color of every odd number of rows.

table tr:nth-of-type(odd){ background:#CCC; }

Zebra columns

Change background color of every odd number of columns.

table td:nth-of-type(odd){ background:#CCC; }

Zebra rows and cols

Change background color of every odd number of rows and columns. Use RGBA background color, it will not work with HEX color!

table tr:nth-of-type(odd),table td:nth-of-type(odd){ background:rgba(0,0,0,0.1); }

Demo »


Go Daddy


Related articles

Redirect www to non www with .htaccess RewriteRule

Redirect www to non www with .htaccess RewriteRule

05/12/2015

Redirect your websites visitors from www.domain.com to domain.com without www.

Unordered List Style Image CSS

Unordered List Style Image CSS

06/03/2013

Learn how to style UL with any image using CSS.

OL and UL List CSS Style

OL and UL List CSS Style

03/03/2013

Styling ordered and unordered lists is easy. Just write a single line of CSS to change the list style type.


1 comment

lee2012-12-08 00:15

Great post, saved me from the headache. This is what I wanted :)

Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the lion *


Find us on Facebook

Tags

Get online with the world's Best - GoDaddy.com!

Back to Top