


Le style CSS peut-il alterner les lignes du tableau sans utiliser d'attributs de classe sur chaque ligne ?
Dec 17, 2024 pm 02:24 PMUtiliser 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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Ajout d'ombres de boîte aux blocs et éléments WordPress

Créez un formulaire de contact JavaScript avec le cadre Smart Forms

Créer un éditeur de texte en ligne avec l'attribut satisfaistable

Faire votre première transition Svelte personnalisée

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)

Téléchargement de fichiers avec Multer dans Node.js et Express

Meilleures animations et effets CSS sur Codecanyon 2025 (payé gratuitement)
