Langues
Ceci est une traduction. Elle peut avoir des erreurs ou être
dépassée par rapport à la version anglaise. Traducteur(-trice):
Laurent Carcone
Règles 'pair' et 'impair'
Une des façons d'améliorer la lisibilité des grandes tables est
de mettre en couleur ses rangées alternativement. Dans la table
ci-dessous par exemple, les rangées pair ont une couleur de fond
gris-clair et les rangées impair une couleur de fond blanc. [Résolu] Tableau - alterner couleur des lignes - Debutant par idou - OpenClassrooms. Les
règles CSS pour exprimer cela sont très simples:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
Month
'94
'95
'96
'97
'98
'99
'00
'01
'02
Jan
14
13
11
Feb
15
12
Mar
16
17
Apr
May
21
20
22
19
Jun
24
23
25
Jul
29
28
26
27
Aug
Sep
Oct
Nov
18
Dec
10
En réalité, CSS autorise non seulement les alternances
pair/impair mais également les alternances sur n'importe quel
interval. Les mots clé 'even' et 'odd' sont juste des raccourcis. Par exemple, pour une longue liste vous pouvez faire ceci:
li:nth-child(5n+3) {font-weight: bold}
Cela stipule que tous les 5ème éléments de liste à partir du
3ème inclus seront en gras, c'est à dire les éléments numerotés 3,
8, 13, 18, 23, etc.
Css Tableau Ligne Couleur Alterne Mon
C'est pourquoi la définition de class="odd" est devenue une technique si courante. À la fin de 2013, je suis heureux de dire que IE6 et IE7 sont finalement morts (ou assez malades pour arrêter de se soucier) mais IE8 est toujours là - heureusement, c'est la seule exception. Html - Table HTML avec des couleurs de ligne alternées via XSL. Vous pouvez utiliser des sélecteurs nth-child (pair / impair), mais tous les navigateurs ( ie 6-8, ff v3. 0) ne supportent pas ces règles, d'où la plupart des solutions qui se réfèrent à une forme de javascript / jquery pour ajouter les classes lignes pour ces navigateurs non conformes pour obtenir l'effet de bande de tigre. $(document)(function()
$("tr:odd")({
"background-color":"#000",
"color":"#fff"});}); tbody td{
padding: 30px;}
tbody tr:nth-child(odd){
background-color: #4C8BF5;
color: #fff;}