Le style CSS peut-il alterner les lignes du tableau sans utiliser d'attributs de classe sur chaque ligne ?

Utiliser CSS pour alterner la couleur des lignes d'un tableau

Lorsqu'il s'agit de styliser des tableaux, créer des couleurs de lignes alternatives est une tâche courante. Traditionnellement, l'utilisation d'attributs de classe pour les lignes de tableau (TR) est une approche populaire, comme le montre l'exemple fourni :

tr.d0 td {
  background-color: #CC9999;
  color: black;
}
tr.d1 td {
  background-color: #9999CC;
  color: black;
}

Cependant, cette méthode peut devenir fastidieuse lorsqu'il s'agit de tableaux plus grands. Alors, pouvons-nous utiliser CSS pour styliser des lignes alternatives sans attributs de classe ?

Styler avec une classe de table

La réponse est oui. En utilisant un attribut de classe pour la table elle-même (table.alternate_color), nous pouvons obtenir le même résultat qu'en utilisant des attributs de classe pour chaque ligne :

table.alternate_color tbody tr:nth-child(odd) {
  background-color: #CC9999;
  color: black;
}
table.alternate_color tbody tr:nth-child(even) {
  background-color: #9999CC;
  color: black;
}

Cette méthode offre une flexibilité, vous permettant de modifier facilement le style de les lignes paires et impaires.

Utiliser jQuery

Une autre approche consiste à utiliser jQuery pour manipuler les lignes du tableau. Cette solution convient si vous souhaitez plus de contrôle sur le processus de rendu :

$(document).ready(function() {
  $("tr:odd").css({
    "background-color": "#000",
    "color": "#fff"
  });
});

Couleur de ligne alternative utilisant CSS nth-child

De plus, vous pouvez utiliser le sélecteur CSS nth-child pour spécifier le style des lignes alternées :

tbody tr:nth-child(odd) {
  background-color: #4C8BF5;
  color: #fff;
}

En utilisant ces techniques, vous pouvez créer des tableaux dynamiques et visuellement attrayants avec des couleurs de lignes alternées en utilisant CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!