Come creare strisce zebra su una tabella html senza utilizzare la generazione di classi javascript e pari/dispari?

Question

Desidero zebra-stripe una tabella html senza utilizzare js roba o scrivere codice lato server per generare classi pari/dispari per le righe della tabella. È mai possibile fare uso di CSS grezzi?

Answer 1

E 'possibile, con selettori CSS3:

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


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

Secondo caniuse.com, tutti i browser supporta ora.

Answer 2

http://www.w3.org/Style/Examples/007/evenodd CSS 3 ° bambino. Poiché il supporto del browser è limitato, è possibile riprodurre il comportamento con Sizzle (incluso, ad esempio, jquery)

Answer 3

(in CSS < = 2) No. Sfortunatamente non ci sono selettori (in CSS < = 2) che operano in base alla posizione (in termini di numero che è all'interno dei figli dei genitori), che ritengo sia necessario farlo con solo CSS.

Nota per sé: leggi su CSS3, già!

Answer 4

In http://www.w3.org/TR/css3-selectors/#structural-pseudos si possono trovare spiegazione ed esempi sull'uso 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; 
} 

Buona fortuna con browser compatibility - ne avrai bisogno.
Ci sono hack per farlo funzionare in IE (usando JS) - Lascerò che setacciare a voi.

Answer 5

Se tutto quello che stai cambiando è il colore di sfondo, allora funzionerebbe il seguente, dove test.gif è un'immagine alta 40px con il 20px superiore di un colore, e il 20 pixel inferiore l'altro colore. Se hai bisogno di cambiare altre proprietà CSS sei praticamente bloccato.

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