Wie erstellt man Zebrastreifen in HTML-Tabellen, ohne Javascript zu verwenden und gerade/ungerade Klassengenerierung?

Question

Ich möchte eine HTML-Tabelle zebra-stripe ohne js Zeug oder schreiben serverseitigen Code, um gerade/ungerade Klassen für Tabellenzeilen zu generieren. Ist es überhaupt möglich, rohe CSS zu verwenden?

Answer 1

Es ist möglich, mit CSS3-Selektoren:

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


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

Nach caniuse.com, jeder Browser nun unterstützt.

Answer 2

http://www.w3.org/Style/Examples/007/evenodd CSS 3 N-Kind. Da die Browser-Unterstützung begrenzt ist, können Sie das Verhalten mit Sizzle (z. B. in jquery) reproduzieren.

Answer 3

(In CSS < = 2) Nein. Leider gibt es keine Selektoren (in CSS < = 2), die basierend auf der Position (in Bezug auf die Anzahl innerhalb der Kinder der Eltern) funktionieren, was ich glaube, dass Sie dies nur mit CSS tun müssten.

Hinweis für sich selbst: lesen Sie auf CSS3, bereits!

Answer 4

In http://www.w3.org/TR/css3-selectors/#structural-pseudos können Sie Erläuterungen und Beispiele zur Verwendung von n-ter Kind finden:

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; 
} 

Viel Glück mit browser compatibility - Sie werden es brauchen.
Es gibt Hacks, damit es im IE funktioniert (mit JS) - ich überlasse das Sichten Ihnen.

Answer 5

Wenn Sie nur die Hintergrundfarbe ändern, würde das Folgende funktionieren, wobei test.gif ein 40px hohes Bild mit den oberen 20px eine Farbe und die unteren 20 Pixel die andere Farbe ist. Wenn Sie irgendwelche anderen css Eigenschaften ändern müssen, sind Sie ziemlich fest.

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