Michael Gearon

Conversion Rate Optimisation (CRO) Specialist

Quick Tip – Using CSS3 For Alternate Row Colours

Written by Michael Gearon on the

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.

So now what?

Let's chat, and get things going