Alterner la couleur de ligne de table à l’aide de CSS ?

Question

J’utilise une table avec la couleur de ligne remplaçant avec cela.

CSS :

HTML :

Ici j’utilise la classe pour , mais je tiens à n’utiliser que pour . Quand j’utilise classe pour la table que cela s’applique sur `` alternatives.

Puis-je écrire mon code HTML comme ceci en utilisant le CSS ?

Est-il possible de faire comme cela ?

Answer 1

Il y a un sélecteur CSS, vraiment un Pseudo-sélecteur, appelé nième enfant. En pure CSS vous pouvez procéder comme suit :

Remarque : Pas de support dans IE 8.

Ou, si vous avez jQuery :

Answer 2

Vous avez l' :nth-child() pseudo-classe:

table tr:nth-child(odd) td{
}
table tr:nth-child(even) td{
}

Dans les premiers jours de l' :nth-child() de sa prise en charge du navigateur était le genre de pauvre. C'est pourquoi le paramètre class="odd" est devenu une technique courante. À la fin de 2013, je suis heureux de dire que IE6 et IE7 sont enfin morts (ou assez malades pour cesser de s'inquiéter), mais IE8 est toujours là, heureusement, c'est la seule exception.

Answer 3

Il suffit d’ajouter ce qui suit à votre code html (au sein du `` ) et vous avez terminé.

HTML :

Plus facilement et plus rapidement que les exemples de jQuery.

Answer 4

La plupart des codes ci-dessus ne fonctionne pas avec Internet Explorer version. La solution qui fonctionne pour IE + autres navigateurs est la suivante.

Answer 5

<script type="text/javascript">
$(function(){
  $("table.alternate_color tr:even").addClass("d0");
   $("table.alternate_color tr:odd").addClass("d1");
});
</script>