Vida Digital, el estilo de la tecnología

Estilo para colores alternos en filas pares o impares de tablas


Palabras clave: CSS, estilo, filas alternas, tabla

La psuedo-clase :nth-child(argument) permite definir estilos para elementos hijos en determinadas posiciones, con lo cual podemos definir un color griz para filas impares y blanco para las impares a fin de mejorar la legibilidad de la información.

Estilo CSS
table.rowAlternate tr:nth-child(odd) { background-color: #eee; } table.rowAlternate tr:nth-child(even) { background-color: #fff; }
Código HTML
<table class="rowAlternate"> <thead> <tr> <th>Entidad federativa</th> <th>Clave</th> </tr> </thead> <tr> <td>Aguascalientes</td> <td>AS</td> </tr> <tr> <td>Veracrux</td> <td>VZ</td> </tr> </table>
Resultado

Entidad federativa Clave
Aguascalientes AS
Veracruz VZ


Teléfono de oficina +52 55 1289 9802
Correo electrónico mercader@vidadigital.com.mx
Billetera Formas de pago
Entrega Politicas de envíos
Devolución Devoluciones y reembolsos

Acerca de Vida Digital, el estilo de la tecnología Vida Digital
Encuentranos en OferTip encuentra, compara y ahorra OferTip
Conoce nuestra Análisis y diseño Fábrica de software

Aviso de privacidad Aviso de privacidad