Zebra stripes [Image courtesy of panuruangjan at FreeDigitalPhotos.net]

I love that CSS3 allows zebra-striping of tables using the nth-child() selector. Achieving this in plain HTML is a messy manual process that must be repeated should the contents / row-order of the table change. The CSS solution is far easier to implement. The nth-child() selector can be a number, a keyword, or a formula.

Hop on over to the Codepen to play around:

See the Pen Zebra-striping table using CSS3 by David Fox (@foxbeefly) on CodePen.

Read more about the CSS’s :nth-child() selector here: https://www.w3schools.com/cssref/sel_nth-child.asp

By MisterFoxOnline

CAT Educator

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.