Home/ Questions/Q 7610881
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T01:31:35+00:00

I’ve got the following table, with the first line containing 2 sub-lines and the

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0