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

Senior Interaction Designer and Co-Author to Tiny CSS Projects