Michael Gearon

Quick Tip – Using CSS3 For Alternate Row Colours

Michael Gearon

Last updated on

Using the CSS3 pseudo class nth-child we can style table rows to be alternating colours.Browser support using the nth-child is good, with all major browsers supporting it.

CSS3

tr:nth-child(odd){ 
background-color:#eee; 
}
tr:nth-child(even){ 
background-color:#fff; 
}

Example

See the Pen wGMgzQ by Michael Gearon (@michaelgearon) on CodePen.0

Michael Gearon

Written by
Michael Gearon

Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.