Table Alternate n columns CSS Colors

Question

I got a dynamic table, in this jsfiddle link is an example of a part of it

http://jsfiddle.net/Dta7K/

I would like to add an appropriate CSS to alternate a color by date columns, I'm looking for css like:

tr:nth-child(4n) td { }

But I don't know for what should I change the 4n iteration that color the whole column cells under the dates.

Which could be the best approach?

Answer 1

Your code will affect all the cells in every fourth row.

What you want is for the header row to alternate color every other column, and the data rows to alternate the 4th, 5th and 6th of every 6 columns.

thead tr th:nth-child(2n) {
    background-color: #ccf;
}

tbody tr th:nth-child(6n + 4),
tbody tr th:nth-child(6n + 5),
tbody tr th:nth-child(6n + 6), 
tbody tr td:nth-child(6n + 4),
tbody tr td:nth-child(6n + 5),
tbody tr td:nth-child(6n + 6) {
    background-color: #ccf;
}

Answer 2

If you want to color the columns, you would need to move the :nth-child(n) part of the selector to the td as well as remove the letter 'n':

tr td:nth-child(1)

Quick edit to your fiddle, is this what you mean?:

http://jsfiddle.net/99Z5Q/