zeuder.net

Alternar color de filas con CSS

Cuando la tabla es muy alta y ancha terminaremos perdiendo la fila en la que estábamos ubicados. Entonces para evitar esto se nos ocurre una cosa: alternar el color de las filas. Para lograrlo el método más recurrido es JavaScript y/o PHP. Y la mayoría nos olvidamos del método más sencillo: CSS.

Para ello usamos la pseudo-clase :nth-child(). Esta pseudo-clase fue introducida en el año 2001 y aunque forma parte de CSS3, los navegadores no tardaron en implementarla, al menos los más modernos.

Me saltaré la parte de su sintaxis y me iré directamente a lo que nos interesa.
e:nth-child(odd) lo usaremos para las filas impares(1,3,5…) y e:nth-child(even) para las filas pares(2,4,6…). Donde e es una etiqueta html y como el nombre en inglés indica, odd es impar y even es par.

Vayamos al ejemplo, si queremos que las filas impares sean un color claro como #ececec y las filas pares sean un color oscuro como #bdbdbd nuestro CSS debería de lucir así:

table {border: 1px solid black; border-collapse: collapse;}
td { border: 1px solid black;}
tr:nth-child(odd){ background: #ececec;} /* color claro para las filas impares */
tr:nth-child(even){ background: #bdbdbd;} /* color oscuro para las filas pares */

Ver ejemplo en vivo.

En esta imagen puedes ver como debe lucir la tabla por si tienes un navegador muy malo y no puedes ver más que una tabla blanca.

Eso es todo aunque lastimosamente como dije al principio solo los navegadores modernos soportan esta pseudoclase, es decir, no funciona en Internet Explorer. Para ello puedes usar un archivo htc de esos que andan circulando por la red o usar el script IE7.

• CSS, Desarrollo Web / Recursos WM
• 6 comments (5308 views)