CSS Zebra Stripe a Specific Table tr:nth-child(even)

Posted by BillR on Stack Overflow See other posts from Stack Overflow or by BillR
Published on 2012-09-15T21:36:51Z Indexed on 2012/09/15 21:37 UTC
Read the original article Hit count: 168

Filed under:
|
|
|

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.

© Stack Overflow or respective owner

Related posts about table

Related posts about css3