CSS Odd/Even td nested

Question

I am trying to come up with a style my rows with odd/even styles. The row is going to be marked with class odd/even but the style needs to apply to the containing td/th.

The reason the style can't be placed directly on the row is because applying background colors to the row instead of the td/th causes inconsistent results in certain browsers.

When I apply the color to the td/th it causes problem in nested scenarios.

<html><head><title>Nesting</title></head><body>

<style type="text/css">
    .even td, .even th {
        background-color: #FBFCFD;
    }
    .odd td, .odd th {
        background-color: #FEFFFF;
    }
</style>

<table width="100%">
    <tr class="even">
        <th>Test</th>
        <td>Test</td>
    </tr>
    <tr class="odd">
        <th>Test</th>
        <td>Test</td>
    </tr>
    <tr class="even">
        <th>Test</th>
        <td>Test</td>
    </tr>
    <tr class="odd">
        <th>Test</th>
        <td>

            <table width="100%">
                <tr class="even">
                    <th>Test</th>
                    <td>Test</td>
                </tr>
                <tr class="odd">
                    <th>Test</th>
                    <td>Test</td>
                </tr>
                <tr class="even">
                    <th>Test</th>
                    <td>Test</td>
                </tr>
                <tr class="odd">
                    <th>Test</th>
                    <td>

                        <table width="100%">
                            <tr class="even">
                                <th>Test</th>
                                <td>Test</td>
                            </tr>
                            <tr class="odd">
                                <th>Test</th>
                                <td>Test</td>
                            </tr>
                            <tr class="even">
                                <th>Test</th>
                                <td>Test</td>
                            </tr>
                            <tr class="odd">
                                <th>Test</th>
                                <td>Test</td>
                            </tr>
                        </table>

                    </td>
                </tr>
            </table>

        </td>
    </tr>
</table>

</body></html>

What would be ideal is if I could do something like the following, but unfortunately it does work in older browsers.

<style type="text/css">
    .even > td, .even > th {
        background-color: #FBFCFD;
    }
    .odd > td, .odd > th {
        background-color: #FEFFFF;
    }
</style>

See the problem live - http://jsfiddle.net/fB9Db/

Is the height of each row going to be consistant 100% of the time? — Joonas, Jul 10 '11 at 21:01
Why are you even nesting tables? I seriously can't think of any reason to do so. — You, Jul 10 '11 at 22:41

score 0 · Answer 1 · edited Mar 23 '13 at 14:53

You're writing css for the even/odd td and th but then putting the classes on the tr. Why?

Try applying the css to the correct html elements. That might work better for you. When nesting html elements, you have to nest the css styles as well.

.even, td, .even table td, .even table table td, { background-color: #FFFFF; }
.odd td, .odd table td, .odd table table td { background-color: #000000; }

That should take care of tables nested at least 2 layers deep. Add more for more nesting.

score 0 · Answer 2 · edited May 23 '17 at 12:28

My suggestion is to use the direct child selector like you posted yourself:

<style type="text/css">
    .even > td, .even > th {
        background-color: #FBFCFD;
    }
    .odd > td, .odd > th {
        background-color: #FEFFFF;
    }
</style>

The browser support for this is almost universal. The only browser missing is IE6, which is no longer supported by Microsoft and many web pages in the world.

See here for a list of browsers that support it:

http://www.quirksmode.org/css/selectors/

What browsers support CSS #parent > .direct-child notation? (no jQuery)

score 0 · Answer 3 · answered Jul 10 '11 at 22:00

How about switching evens and odds in the css?

http://jsfiddle.net/fB9Db/1/

<style type="text/css">
    .even td, .even th {
        background-color: #FBFCFD;
    }
    .odd td, .odd th {
        background-color: #FEFFFF;
    }
</style>

Another thing is you could use the red color to cover the entire tabular box's background and then assign background color to only odds..

CSS Odd/Even td nested

3 Answers3