Zebra striping a table with CSS
As with any tabular data it's easier on your eyes when the background is striped.
Since we're not in the IE6 world anymore, the most obvious solution for me was to
nth-child(even) CSS selector.
This worked well until I had to hide some of the rows. What I learned yesterday is
nth-child(even) doesn't respect any previous selectors. So all my efforts to
make something like
:not([hidden]):nth-child(even) work failed miserably. It's just
What everyone seems to be doing is using a repeating linear background image to add striped backgrounds to their tables. Seriously, this is what people are using:
background-image: repeating-linear-gradient(white, white 25px, hotpink 25px, hotpink 50px);
If this is not an ugly hack, I don't know what is.
You can find me on GitHub or in the Mozilla office. But the best way to communicate with me is by sending an old-fashioned electronic mail.