CSS Zebra Stripe a Specific Table tr:nth-child(even)
- by BillR
I want to zebra stripe only select tables using. I do not want to use jQuery for this.
tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}
When I put that in a css file it affects all tables on all pages that call the same stylesheet. What I would like to do is selectively apply it to specific tables.
I have tried this, but it doesn't work.
// in stylesheet
.zebra_stripe{
tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}
}
// in html
<table class="zebra_even">
<colgroup>
<col class="width_10em" />
<col class="width_15em" />
</colgroup>
<tr>
<td>Odd row nice and clear.</td>
<td>Some Stuff</td>
</tr>
<tr>
<td>Even row nice and clear but it should be shaded.</td>
<td>Some Stuff</td>
</tr>
</table>
And this:
<table>
<colgroup>
<col class="width_10em" />
<col class="width_15em" />
</colgroup>
<tbody class="zebra_even">
The stylesheet works as it is properly formatting other elements of the html. Can someone help me with an answer to this problem? Thanks.
