CSS Alternate Rows - some rows hidden

Question

I\'m trying to style a table so that each row is a different colour (odd/even). I have the following CSS:

#woo tr:nth-child(even) td {
    background-color: #f0f         


        

Answer 1

This question might be old, but when looking for a solution to that problem I came here and inspired by Jeff Seifert's answer I used a repeating-linear gradient background image to have a purely css based solution:

tbody {
    background-image: repeating-linear-gradient(grey 0 2em, white 2em 4em);
}
tr {
    height: 2em;
}

The only thing downside is, that you will have to specify a height for the table row (and put the same value in the gradient definition).

EDIT: This only works if all rows have the same height. Sadly max-height does not work for table rows. I have two half-baked solutions for that:

1. Prevent text from wrapping by applying tr{white-space: nowrap;} - Care still has to be taken for non-text elements, overflow could also become an issue

2. Wrap the content with another element like a

   and apply div{max-height:2em;} - This requires changes in the HTML and also needs treatment of overflow