Quick Tip – Using CSS3 For Alternate Row Colours

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

Written by Michael Gearon

Michael Gearon is a UX Designer at BrandContent. Specialising in voice assistants and CRO, I have a wealth of experience in UX, UI and website design. Based in Cardiff, South Wales Mike can help local businesses with their online presence.