Comment créer des rayures zébrées sur un tableau html sans utiliser le javascript et la génération de classes paires/impaires ?

Question

Je veux zébrer un tableau html sans utiliser de trucs js ou écrire du code côté serveur pour générer des classes paires/impaires pour les lignes du tableau. Est-il possible de le faire en utilisant du css brut ?

Answer 1

C'est possible, mais uniquement avec les sélecteurs CSS3 :

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

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

Les navigateurs modernes le prennent déjà en charge.

Answer 2

Si vous ne modifiez que la couleur d'arrière-plan, la solution suivante pourrait fonctionner : test.gif est une image de 40 px de haut dont les 20 px supérieurs sont d'une couleur et les 20 px inférieurs de l'autre couleur. Si vous devez modifier d'autres propriétés css, vous êtes pratiquement coincé.

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

Answer 3

http://www.w3.org/Style/Examples/007/evenodd CSS 3 nth-child. Comme le support des navigateurs est limité, vous pouvez reproduire le comportement avec Sizzle (inclus dans, jquery par exemple)

Answer 4

(En CSS <= 2) Non. Malheureusement, il n'y a pas de sélecteurs (dans CSS <= 2) qui opèrent sur la base de la position (en termes de nombre d'éléments dans les enfants du parent). Je pense que vous devez le faire uniquement avec CSS.

Note à moi-même : lisez les CSS3, déjà !

Answer 5

En http://www.w3.org/TR/css3-selectors/#structural-pseudos vous trouverez des explications et des exemples sur l'utilisation 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;
}

Bonne chance avec compatibilité des navigateurs - vous en aurez besoin.
Il existe des astuces pour le faire fonctionner dans IE (en utilisant JS) - je vous laisse le soin de les examiner.