pakdoltogel.net
Pense-bête, Astuces, Aide, Résolution de problèmes pour Webmasters et développeurs WEB. Petite astuce pour mettre en style un tableau HTM en affectant un background rouge uniquement aux lignes paires. Code CSS: Colore une ligne sur deux table tr:nth-child(odd){ background-color:red;} 11 mai 2012 / 0 t@ra t@ra 2012-05-11 00:00:00 2020-04-09 14:26:51 Colorer une ligne sur 2 dans un tableau en CSS3
Pour alterner la couleur des lignes d'un tableau HTML, vous pouvez utiliser la pseudo-classe CSS:nth-child avec la valeur even ou odd, selon que vous vouliez alterner les couleurs selon les lignes paires ou impaires du tableau HTML:
Nom | Groupe | Age | Nico | 1FORMATIK | 35 | Hervé | 42 | Blaise | 47 | Pinkmary | 32 |
---|
En CSS pur, vous pouvez effectuer les opérations suivantes: tr: nth - child ( even) { background - color: #000000;} Remarque: Pas de support dans IE 8. Ou, si vous avez jQuery: $ ( "tr:even"). css ( "background-color", "#000000");}); Vous avez la:nth-child() pseudo-classe: table tr: nth-child ( odd) td {... } table tr: nth-child ( even) td {... Css tableau ligne couleur alternée. } Au début de:nth-child() son navigateur, le support était plutôt médiocre. C'est pourquoi le réglage class="odd" est devenu une technique si courante. Fin 2013, je suis heureux de dire qu'IE6 et IE7 sont finalement morts (ou assez malades pour arrêter de s'occuper), mais IE8 est toujours là - heureusement, c'est la seule exception. Ajoutez simplement ce qui suit à votre code html (avec le
) et vous avez terminé. HTML: Plus simple et plus rapide que les exemples jQuery. puis-je écrire mon html comme ceci avec l'utilisation de CSS? Oui, mais vous devrez alors utiliser le:nth-child() pseudo sélecteur (qui a cependant un support limité): table.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. Css tableau ligne couleur alterne francais. 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. 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.
-à-d. 6-8, ff v3. 0) ne prennent pas en charge ces règles. lignes pour ces navigateurs non conformes pour obtenir l'effet de bande de tigre. Il existe un moyen assez facile de le faire en PHP, si je comprends votre requête, je suppose que vous codez en PHP et que vous utilisez CSS et javascript pour améliorer la sortie. La sortie dynamique de la base de données portera une boucle for pour parcourir les résultats qui sont ensuite chargés dans la table. Couleur différente pour les lignes dans la table - css, table. Ajoutez simplement un appel de fonction à ceci: echo "
Fermé akyrion3000 Messages postés 541 Date d'inscription dimanche 5 juin 2005 Statut Membre Dernière intervention 16 janvier 2010 - 3 mai 2007 à 17:47 Romaric - 8 août 2014 à 05:08 Bonjour, Est il possible de faire un tableau avec des cellules dont le fond est alterné à chaque ligne blanc gris? Ceci permettra une meilleur lecture du tableau. Est-ce possible de le faire seulement avec du CSS? (Sans PHP pour faire alterner les couleurs. ) ton pro est résolu Pas besoin de PHP, de, ni même de Javascript, il suffit d'utiliser CSS: Je suis tombé sur cette page en faisant une recherche sur le sujet, je laisse ce message pour aider ceux qui y tomberont plus tard. Lignes de tableau aux couleurs alternées [CSS] - Web design - Graphisme - FORUM HardWare.fr. ul li:nth-child(2n+1){background-color:#e4ecf5;} /* pour une liste */ table tr:nth-child(2n+1){background-color:#e4ecf5;} /* pour un tableau */ Bien sur que c'est possible, Il suffit d'initialiser une variable à 0. A chaque ligne de ton tableau, tu fais passer cette variable à 1 si ancienne = 0 ou 0 si ancienne = 1. Après quoi il te suffit de dire si var = 0 alors bgcolor="#tacouleur" SINON bgcolor="#autrecouleur" Exemple: (... ) $var=0; if ($var==0) {?
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. Css - Remplacer la couleur des lignes sur une seule ligne à l'intérieur d'un tableau avec des couleurs de rangées alternées. 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;}