Menu
I want to zebra-stripe a html table without using any js stuff or writing server-side code to generate even/odd classes for table rows. Is it ever possible to do using raw css?
717
This article will tell you how to create a zebra-stripped table (rows or columns) in a webpage by using HTML and CSS only. Table with Zebra Stripped rows: Tap into the tr (table row) element is CSS. Use the nth-child() selector and add background-color of your choice to all odd (or even) table rows.
Using :nth-of-type(n) with tables One of the most common ways to style tables is to set the background color of every other row. This is often referred to as "zebra stripes." You can accomplish this by setting every other row with a CSS class and then defining the style for that class.
It is possible, with CSS3 selectors:
tr:nth-child(even) { background-color: red; } tr:nth-child(odd) { background-color: white; } According to caniuse.com, every browser supports it now.
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
