¿Cómo crear rayas de cebra en la tabla html sin usar javascript y la generación de clases par/impar?

Question

Quiero hacer zebra-stripe en una tabla html sin utilizar ningún elemento js o escribir código del lado del servidor para generar clases pares/impares para las filas de la tabla. ¿Es posible usar CSS sin formato?

Answer 1

Es posible, con selectores CSS3:

tr:nth-child(even) { 
    background-color: red; 
} 


tr:nth-child(odd) { 
    background-color: white; 
} 

Según caniuse.com, todos los navegadores soporta ahora.

Answer 2

http://www.w3.org/Style/Examples/007/evenodd CSS 3 nth-child. Dado que el soporte del navegador es limitado, puede reproducir el comportamiento con Sizzle (incluido en, jquery por ejemplo)

Answer 3

(En CSS < = 2) No. Lamentablemente, no hay selectores (en CSS < = 2) que funcionen en función de la posición (en términos del número que está dentro de los hijos de sus padres) que creo que tendrían que hacer con CSS.

Nota para usted: ¡lea ya en CSS3!

Answer 4

En http://www.w3.org/TR/css3-selectors/#structural-pseudos se pueden encontrar explicaciones y ejemplos sobre el uso de nth-child:

tr:nth-child(2n+1) /* represents every odd row of an HTML table */ { 
    background-color: green; 
} 
tr:nth-child(odd) /* same */ { 
    background-color: green; 
} 
tr:nth-child(2n+0) /* represents every even row of an HTML table */ { 
    background-color: pink; 
} 
tr:nth-child(even) /* same */ { 
    background-color: pink; 
} 

Buena suerte con browser compatibility - usted lo necesite.
Hay hacks para hacerlo funcionar en IE (usando JS) - Dejaré ese cribado para ti.

Answer 5

Si todo lo que está cambiando es el color de fondo, entonces funcionaría lo siguiente, donde test.gif es una imagen de 40px de alto con los 20 píxeles superiores de un color y los 20 píxeles inferiores del otro color. Si necesitas cambiar cualquier otra propiedad CSS, estás atascado.

table { background: url(test.gif) top; } 
table tr { height: 20px; }