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

Tengo la siguiente tabla, con la primera línea que contiene 2 sublíneas y la segunda que contiene 3 sublíneas.

Con este estilo css, el color cebra (es decir, color alternativo en dos filas consecutivas) es defectuoso, la segunda celda principal debe ser blanca y no gris:

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

Cebra defectuosa con nth-child css

Entonces, ¿hay alguna manera de colorear una tabla de cebra de la manera correcta?

Por supuesto, mi problema real tiene que ver con muchas más filas, con un número mucho más variable de sublíneas.

<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

¿Qué es un "color cebra"? -

Se agregó una definición para el color de cebra: color alternativo en dos filas consecutivas -

¿Cómo quieres que se vean las rayas de cebra? -

En la imagen incluida, quiero que Big2 sea blanco y no gris, ya que es consecutivo a una celda gris (Big1) -

Lo que estás viendo es la forma "correcta". Tiene celdas que abarcan varias filas, por lo que tendrá que asignar colores específicos a cada celda. -

1 Respuestas

Funciona como está diseñado.

no funciona como 

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

será gris, es el primer TR (impar)

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

será blanco, es el segundo TR (par) etc.

La mejor manera de hacerlo será asignar clases 'impares' e 'pares' al tr en cuestión manualmente.

respondido 09 mar '12, 15:03

Efectivamente, llegué a la misma conclusión. Gracias, tienes los puntos - vinzz

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