Cool CSS trick: Add alternating row style to a table

James Jackson shares a cool trick to add an alternating row style to any table using CSS and one image… very neat and useful.

Alternating row colors with CSS alone

High level of what he shows:


body, td {font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 12px;}
#tableDisplay {background: url(“horizontalpattern.png”); border: 1px solid #cacaca; border-width: 0 1px 1px 1px;}
#tableDisplay td {height: 25px; padding-left: 5px; padding-right: 5px;}
End Result:

screenshot for horizontal pattern