Showing posts with label alternate row color. Show all posts
Showing posts with label alternate row color. Show all posts

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!