: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 |