CSS - Alterner les couleurs d'un tableau sans PHP

Pour rendre un tableau plus lisible il est fréquent d'alterner la couleur de fond des lignes, généralement c'est un script php ou JavaScript qui va insérer un attribut 'class'  différent à la balise tr, suivant s'il s'agit d'une ligne paire ou impaire (even ou odd en anglais)

Il existe un moyen d'alterner les couleurs d'un tableau sans avoir recours à un script, il est même possible de cibler facilement une ligne, ou un groupe de lignes, il s'agit des sélecteurs : nth-child , first-child, last-child etc...

Dans ce billet on va voir comment, uniquement avec du CSS, rendre les lignes paires sur fond gris, et les lignes impaires sur fond blanc, de plus les cellules auront une bordure verticale sauf sur les bords du tableau

Pour rendre un tableau plus lisible il est fréquent d'alterner la couleur de fond des lignes, généralement c'est un script php ou JavaScript qui va insérer un attribut 'class'  différent à la balise tr, suivant s'il s'agit d'une ligne paire ou impaire (even ou odd en anglais)

Il existe un moyen d'alterner les couleurs d'un tableau sans avoir recours à un script, il est même possible de cibler facilement une ligne, ou un groupe de lignes, il s'agit des sélecteurs : nth-child , first-child, last-child etc...

Dans ce billet on va voir comment, uniquement avec du CSS, rendre les lignes paires sur fond gris, et les lignes impaires sur fond blanc, de plus les cellules auront une bordure verticale sauf sur les bords du tableau


Code CSS

#exemple1 {
width:50%;
}
#exemple1 tbody tr:nth-child(even) {
background-color:#CCCCCC;
}
#exemple1 tbody tr:nth-child(odd) {
color:#CC1100;
background-color:#FFFFFF
}
#exemple1 tbody td {
border-left:solid #777 1px;
padding:5px;
}
#exemple1 tbody td:first-child {
border-left:0px;
}


Explication

nth-child(even) cible les lignes paires alors que nth-child(odd) les lignes impaires
first-child cible la 1ere cellule (ici il est appliqué à la balise td) ce qui nous permet de supprimer la bordure gauche


Résultat

Ligne 1 1 2 3
Ligne 2 1 2 3
Ligne 4 1 2 3
Ligne 5 1 2 3
Ligne 6 1 2 3
Ligne 7 1 2 3


Compatibilité

nth-child

  • IE9+
  • Firefox 3.5+
  • Chrome

first-child

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

Ce billet n'a pas de commentaires

Fil des commentaires de ce billet

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

Ce billet n'a pas de rétroliens

URL de rétrolien : http://yevy.fr/trackback/23