Jak utworzyć paski zebry na tabeli html bez generowania klas javascript i parzystych/nieparzystych?

Question

Chcę zebrać pasek tabeli html bez używania jakichkolwiek rzeczy js lub pisania kodu po stronie serwera, aby wygenerować klasy równe/nieparzyste dla wierszy tabeli. Czy kiedykolwiek można użyć surowego css?

Answer 1

Jest to możliwe, z selektorów CSS3:

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


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

Według caniuse.com, każda przeglądarka wspiera go teraz.

Answer 2

http://www.w3.org/Style/Examples/007/evenodd CSS 3 n-dziecko. Ponieważ obsługa przeglądarki jest ograniczona, możesz odtworzyć to zachowanie za pomocą Sizzle (dołączonego do, jquery na przykład)

Answer 3

(W CSS < = 2) Nie. Niestety, nie ma żadnych selektorów (w CSS < = 2), które działają w oparciu o pozycję (pod względem liczby, która jest w obrębie jej rodziców), co moim zdaniem powinieneś zrobić za pomocą tylko CSS.

Uwaga dla siebie: czytaj już na CSS3!

Answer 4

W http://www.w3.org/TR/css3-selectors/#structural-pseudos można znaleźć wyjaśnień i przykładów wykorzystania 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; 
} 

Powodzenia browser compatibility - będziesz go potrzebować.
Istnieją hacki, które działają w IE (przy użyciu JS) - Zostawię to sifting do ciebie.

Answer 5

Jeśli wszystko, co zmienisz, to kolor tła, to wtedy zadziała poniższy test, gdzie test.gif jest wysokim obrazem o rozmiarze 40 pikseli, górnym 20 pikseli jednym kolorem, a dolny 20 pikseli innym kolorem. Jeśli chcesz zmienić inne właściwości css, to prawie utknąłeś.

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