Tuesday, April 8, 2014

Alternate Row Color HTML Table via CSS

I learned recently that you can 'stripe' a table using CSS rather than using the mod operator to calculate the even/odd to figure out the color. The CSS is much easier to add to your stylesheet:
tr:nth-child(odd) td{background-color:#FFF;}
tr:nth-child(even) td{background-color:#DDD;}
Now, if you assigned a class to the table cell (like I had) and want to continue to inherit that, you would want to write it this way:
tr:nth-child(odd) td.tableTitle{background-color:#FFF;}
tr:nth-child(even) td.tableTitle{background-color:#DDD;}
Nice!