Zebra striscia ogni due TRs in fila con CSS.

Question

Voglio grigio/strisce ogni due righe di fila. È difficile da spiegare. Ecco una foto ::
| -^-^-^-^-^- |
| -^-^-^-^-^- |
| ------------- |
| ------------- |
| -^-^-^-^-^- |
| -^-^-^-^-^- |
| ------------- |
| ------------- |
| -^-^-^-^-^- |
| -^-^-^-^-^- |
| ------------- |
| ------------- |

Answer 1

Ti piace questo? http://jsfiddle.net/GQNUV/1/

table tr:nth-child(4n-1), table tr:nth-child(4n) { 
    background: #ccc; 
} 

Answer 2

Modificare questa base alle proprie preferenze, dovrebbe funzionare

tr:nth-child(4n+1) { color: green; } 
tr:nth-child(4n+2) { color: green; } 
tr:nth-child(4n+3) { color: red; } 
tr:nth-child(4n+4) { color: red; } 

Answer 3

Per questo per funzionare correttamente, il n in nth-child() deve essere lo stesso, ma si cambia ciò che si aggiunge sul n. In questo caso, i numeri possono essere solo un numero a parte. Quindi è necessario 4n+1 e 4n, o 4n+2 e 4n+3, ecc

Fiddle

Answer 4

Se si dispone di una riga per le intestazioni, aggiungere thead e tbody e il cambiamento css a:

table tbody tr:nth-child(4n-1), table tbody tr:nth-child(4n) { 
    background: #ccc; 
}