CODEWITHSUNDEEP
htmlcsshtml-table
Vinzz
Vinzz

Reputation: 4028

Html multilines tables (rowspan) - how to zebra the right way?

I've got the following table, with the first line containing 2 sub-lines and the second one containing 3 sublines.

Whith this css style, the zebra color (i.e. alternate color on two consecutive rows) is faulty, second main cell shall be white, and not gray:

 tr:nth-child(odd)  {background-color: #eee;}
 tr:nth-child(even) {background-color: #fff;}

Faulty zebra with nth-child css

So is there a way to zebra color such a table the right way?

Of course, my real problem deals with much more rows, with a much more variable number of sub-lines.

<head>
    <style>
        tr:nth-child(odd)  {background-color: #eee;}
        tr:nth-child(even) {background-color: #fff;}
    </style>
<head>
<body>
    <table border="1">
        <tr>
            <td rowspan="2">
                Big1
            </td>
            <td>
                small1
            </td>
        </tr>
        <tr>
            <td>
                small2
            </td>
        </tr>
        <tr>
            <td rowspan="3">
                Big2
            </td>
            <td>
                small1
            </td>
        </tr>
        <tr>
            <td>
                small2
            </td>
        </tr>
        <tr>
            <td>
                small3
            </td>
        </tr>
    </table>
</body>

Upvotes: 7

Views: 4391

Answers (1)

user1211577
user1211577

Reputation:

It works as it is laid out.

It isnt working as 

    <tr>
        <td rowspan="2">
            Big1
        </td>
        <td>
            small1
        </td>
    </tr>

will be grey, it's the first TR (odd)

    <tr>
        <td>
            small2
        </td>
    </tr>

will be white, its the second TR (even) etc.

Best way to do it will be to assign 'odd' and 'even' classes to the tr in question manually.

Upvotes: 1

Related Questions