Autre couleur de ligne du tableau à l'aide de CSS?

462

J'utilise un tableau avec une couleur de ligne alternative avec cela.

tr.d0 td {
  background-color: #CC9999;
  color: black;
}
tr.d1 td {
  background-color: #9999CC;
  color: black;
}
<table>
  <tr class="d0">
    <td>One</td>
    <td>one</td>
  </tr>
  <tr class="d1">
    <td>Two</td>
    <td>two</td>
  </tr>
</table>
Développer l'extrait

Ici, j'utilise la classe pour tr, mais je veux utiliser uniquement pour table. Lorsque j'utilise la classe pour la table, cela s'applique à l' tralternative.

Puis-je écrire mon HTML comme ceci en utilisant CSS?

<table class="alternate_color">
    <tr><td>One</td><td>one</td></tr>
    <tr><td>Two</td><td>two</td></tr>
    </table>

Comment puis-je faire en sorte que les lignes aient des "rayures zébrées" en utilisant CSS?

html css html-table Kali Charan Rajput
la source
1
J'ai créé une démo utilisant tous les modèles possibles pour nth-child () - xengravity.com/demo/nth-child
xengravity

Réponses:

760 

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

tbody tr:nth-child(odd){
  background-color: #4C8BF5;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>
Développer l'extrait

Il y a un sélecteur CSS, vraiment un pseudo-sélecteur, appelé nth-child. 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:

$(document).ready(function()
{
  $("tr:even").css("background-color", "#000000");
});
Russell Dias
la source
est-il possible de changer également la couleur du lien hypertexte des lignes alternées. Je veux une couleur de lien hypertexte différente pour une ligne paire et une autre pour une ligne impaire. Merci
عثمان غني
4
Très bonne réponse! Mais juste pour information, il existe un autre sélecteur CSS qui peut être utilisé, par exemple. tr:nth-of-type(odd/even)
Nikhil Nanjappa
2
@ عثمانغني: Oui, vous feriez justetr:nth-child(even) a
Gerard
1
Ne fonctionne pas si vous écrivez votre html dynamiquement. Ensuite, vous devez ajouter des classes aux lignes.
erik
En 2019: ce n'est plus la meilleure solution. Utilisez du CSS pur .
Chiramisu
158

Vous avez la :nth-child()pseudo-classe:

table tr:nth-child(odd) td{
    ...
}
table tr:nth-child(even) td{
    ...
}

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.

Álvaro González
la source
3
Réponse préférée car elle n'applique pas CSS à l'en-tête
Mike
Salut, il est en retard de quelques années, mais qu'en est-il de l'ajout d'une classe sélectionnée avec une couleur bg avec jqeury à la ligne du tableau lorsque vous cliquez dessus. J'ai remarqué que la pseudo-classe: nth-child remplace la couleur bg lorsque vous ajoutez une classe "sélectionnée" avec jqeury
dutchkillsg
@dutchkillsg Cela semble être une toute nouvelle question plutôt qu'un commentaire à ma réponse ...
Álvaro González
Pour les "rayures zébrées" (c'est-à-dire verticales), échangez simplement tr:nth-child(odd)avec td:nth-of-type(odd). Notez que dans ce cas, vous appliquez une pseudo-classe différente aux éléments tdplutôt qu'aux tréléments.
Chiramisu
36

Ajoutez simplement ce qui suit à votre code html (avec le <head>) et vous avez terminé.

HTML:

<style>
      tr:nth-of-type(odd) {
      background-color:#ccc;
    }
</style>

Plus simple et plus rapide que les exemples jQuery.

bmich72
la source
Ce devrait être la réponse acceptée. Dans la mesure du possible, CSS devrait gérer le style, tandis que javascript peut être utilisé pour gérer d'autres sujets.
Tormod Haugene
Je ne fais pas de HTML au quotidien. #cccne me semble pas être un code couleur valide. Peux-tu expliquer? Merci.
tommy.carstensen
1
@ tommy.carstensen cela s'appelle "forme hexadécimale abrégée". Fondamentalement, #cccest étendu à #cccccc, ce qui signifie que chaque couleur RVB a la valeur hexadécimale ccou décimale 204(c. rgb(204, 204, 204)-à-d.). En savoir plus à ce sujet ici -> en.wikipedia.org/wiki/Web_colors#Shorthand_hexadecimal_form
Nick Grealy
Ne fonctionne pas sur la version Chrome 78.0.3904.108
IlludiumPu36
13

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.alternate_color tr:nth-child(odd) td{
   /* styles here */
}
table.alternate_color tr:nth-child(even) td{
   /* styles here */
}
Sarfraz
la source
13

Nous pouvons utiliser des règles CSS impaires et paires et la méthode jQuery pour les couleurs de ligne alternatives

Utilisation de CSS

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

Utilisation de jQuery

$(document).ready(function()
{
  $("table tr:odd").css("background", "#ccc");
  $("table tr:even").css("background", "#fff");
});


table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}
<table>
  <tr>
    <td>One</td>
    <td>one</td>
   </tr>
  <tr>
    <td>Two</td>
    <td>two</td>
  </tr>
</table>
Développer l'extrait

Santosh Khalse
la source
10

La plupart des codes ci-dessus ne fonctionneront pas avec la version IE. La solution qui fonctionne pour IE + autres navigateurs est la suivante.

   <style type="text/css">
      tr:nth-child(2n) {
             background-color: #FFEBCD;
        }
</style>
Sriwantha Attanayake
la source
9 
<script type="text/javascript">
$(function(){
  $("table.alternate_color tr:even").addClass("d0");
   $("table.alternate_color tr:odd").addClass("d1");
});
</script>
Pranay Rana
la source
46
OK, je sais que jQuery est assez omniprésent sur ce site, mais vous ne devez pas publier jQuery sans explication. Ce script ne fonctionnera pas seul.
DisgruntledGoat
4

Vous pouvez utiliser des sélecteurs nième enfant (impair / pair), mais tous les navigateurs ( c.-à-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.

carré rouge
la source
3

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. Ajoutez simplement un appel de fonction à ceci:

echo "<tr style=".getbgc($i).">";  //this calls the function based on the iteration of the for loop.

puis ajoutez la fonction à la page ou au fichier de bibliothèque:

function getbgc($trcount)
{

$blue="\"background-color: #EEFAF6;\"";
$green="\"background-color: #D4F7EB;\"";
$odd=$trcount%2;
    if($odd==1){return $blue;}
    else{return $green;}

}

Maintenant, cela alternera dynamiquement entre les couleurs à chaque ligne de table nouvellement générée.

C'est beaucoup plus facile que de jouer avec CSS qui ne fonctionne pas sur tous les navigateurs.

J'espère que cela t'aides.

marque
la source
merci @mark. Il n'est pas corrigé que le site soit en PHP, .net ou HTML simple.
Kali Charan Rajput