html - Table with alternate backround rows and header

Question

I use css to make my rows alternate like this: Fiddle

tr:nth-child(odd) td   { background-color:red; }
tr:nth-child(even) td   { background-color:blue; }
tr th { background-color: yellow}

table {
    border: 1px solid black;
    margin: 10px;
    width: 100px;
    }

Some tables have headers, and some tables do not. The data always needs start with red, but when a table has a header, its row is counted as first row and data starts with blue instead. Is there any way to make it always start with red?

Answer 1

Use <tbody> and <thead>

Use <tbody> and put all the body rows in it. Also, wrap your header inside <thead>. Updated CSS below:

tbody tr:nth-child(odd) td   { background-color:red; }
tbody tr:nth-child(even) td   { background-color:blue; }
thead tr th { background-color: yellow}

This way you will be targeting only the data rows and not header rows. Hope this helps you...

Fiddle: http://jsfiddle.net/praveenscience/TQgjC/