Tablas html multilíneas (rowspan): ¿cómo cebra de la manera correcta?

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> 

preguntado el 09 de marzo de 12 a las 15:03

What is a "zebra color"? -

Added a definition for zebra color: alternate color on two consecutive rows -

What do you want the zebra stripes to look like? -

On the included image, I want Big2 to be white, and not gray, as it's consecutive to a gray cell (Big1) -

What you're seeing is the "right" way. You have cells spanning multiple rows, so you'll have to assign specific colors to each cell. -

1 Respuestas

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.

respondido 09 mar '12, 15:03

Indeed, I reached the same conclusion. Thanks, You've got the points - vinzz

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.