Alternar el color de las filas de una tabla con CSS3

Alternar el color de las filas de una tabla mediante CSS es mas sencillo de lo que en principio pudiera parecer. Para ello basta utilizar la pseudo-clase :nth-child(x) que permite seleccionar el enésimo elemento hijo de un elemento padre, siendo el número del elemento el argumento x.

No obstante, el argumento x puede ser sustituido por las palabras clave odd y even y así seleccionar los hijos impares con :nth-child (odd) y los hijos pares con :nth-child (even) aplicando estas pseudo-clases a la etiqueta HTML de fila de tabla tr.

De esta manera, con las siguientes reglas CSS obtendríamos una tabla como se muestra más abajo:

Alternar colore de filas en una tabla con CSS3

3 comentarios en “Alternar el color de las filas de una tabla con CSS3

  1. Ernesto

    Excelente aporte, lo aplique con una tabla que se genera después de hacer una consulta a la Base de Datos y funciono.
    Gracias!

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *