Contenido

Zebra tables con CSS3

28 Ago

+ 5

CSS3 está a la vuelta de la esquina, gracias a la implementación por parte de los navegadores, este estandar poco a poco va haciéndose más real y van apareciendo perlas como estas del equipo devOpera.

En el artículo, nos muestran como usar el pseudo-selector nth-child , un selector que nos permitirá crear tablas estilo zebra con una sola línea.

tr:nthchild(2n+1) {
  background-color: #99ff99;
}

Al selector le debemos indicar el número de líneas a los que ha de aplicar el estilo, en este caso, cada 2 líneas empezando en la posición 1 (comenzan en el 0).

Más información

Me parece genial, la de veces que he tenido que hacer el cambio de colores en una tabla dinámica por programación o incluso a mano en páginas estáticas HTML. ¡Que llegue CSS3 Ya!

Ooops, me equivoque de post para dejar el comentario. Otra cosa que es probable que pase a los que usamos la list view y tengamos que desplegar para dejar el comentario.
Cuando lo hayas leído Borra por favor este comentario y el anterior que el que quería dejar ya le he puesto también en donde debía

nth-child está bien, el ejemplo también lo está, pero para el que no se quiere matar, está tr:nth-child(odd) que va perfecto también.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.


Cerrar
Enviar por Correo