3

Efecto zebra en tablas u otros elementos

26Nov
en CSS, Desarrollo web

Este es un post bien sencillo pues es una utilidad que no sabía hacerla con selectores CSS, anteriormente lo creaba con JQuery, agregando clases y quitando por lo que decidí leer un poco y resolver mi inquietud con CSS . Este estilo ayuda mucho en la legibilidad de las tablas cuando se hacen extensas en datos.

Este sería el estilo para las filas pares e impares

tr:nth-child(even) {background: #CCC }
tr:nth-child(odd) {background: #FFF}

Exactamente el selector permite no solo alternar entre pares e impares sino que nth-child admite intervalos arbitrarios para su aplicación. Este es un ejemplo
para los li con seleccion diferente a la anterior.

li:nth-child(5n+3) {font-weight: bold}

Lo que quiere decir que cada quinto elemento contando a partir del tercero aparecerá en negrita. Dicho de otro modo, estarán en negrita los elementos con la numeración 3, 8, 13, 18, 23, etc.

 

De igual forma para las columnas

 

Lo mismo vale para columnas de tablas, pero entonces debe haber un elemento del documento que se corresponda con la columna. A tal fin existe en HTML el elemento COL. La tabla debe tener un COL al principio de cada columna:

<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Mes<th>1994<th>1995<th>1996...

(El elemento COL sirve para otros usos además de la aplicación de estilos, pero en este caso lo único que necesitamos es que haya elementos COL). Las siguientes reglas ponen fondo amarillo a la primera columna y luego fondo gris a las columnas impares a partir de la número 3:

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}

Espero les ayude.

3 Comentarios

  1. zico dice:

    Muchas gracias por el tutorial.

  2. Triple R dice:

    Interesante!!!!

Dejar un comentario a ooo

¿Eres humano? Entonces resuelve esta operación: * Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.