Quick Tip – Using CSS3 For Alternate Row Colours
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
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”wGMgzQ” default_tab=”result” user=”michaelgearon”]See the Pen wGMgzQ by Michael Gearon (@michaelgearon) on CodePen.[/codepen_embed]
Written by
Senior Interaction Designer and Co-Author to Tiny CSS Projects