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

5 thoughts on “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!

    Reply
  2. Leo

    Alguien tiene un ejemplo de como, además, cambiar el color de fondo del renglón donde esté el mose? Muchas Gracias. Saludos.

    Reply
    1. Juan de la Cruz Post author

      Hola Leo,

      para que el color de fondo de las filas de las tablas cambien al poner el ratón sobre ellas solo tienes que agregar la siguiente regla CSS a tu hoja de estilos:

      tr:hover {
      background-color: #EBF8FC;
      }

      Saludos.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *