You are reading...

December 17th

Note: Not every browser support every CSS property. And there plenty of vendor-specific properties that will not work on other browsers. Keep that in mind. To my knowledge, all smartphone browsers support most CSS3 properties.

Clients love zebra patterned lists and tables. They love it, something to do with readability. Whatever. With CSS3, it’s a snap. For instance, in a typical table:

table tr td:nth-child(2n) {
background:#eee;
padding:10px 0;
}

This will add a background and padding every even number of cells. N equals all whole numbers.


table tr td:nth-child(2n + 1) {
padding:10px 0;
}

And just to make things tidy, this is how to do odds. No need to add “alt” classes.

In the future, no longer will one exchange barbs with a client over the effectiveness of zebra tables. Just do it and collect paycheck.

Go home