Couleur de ligne de table alternative en utilisant CSS?

J'utilise une table avec une couleur de ligne alternative avec ceci.

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>

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 sur tr alternative.

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 de zèbre" en utilisant CSS?

414
demandé sur Laurel 2010-06-21 15:34:45

9 réponses 

$(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>

Il y a un sélecteur CSS, vraiment un pseudo-sélecteur, appelé nth-child. En CSS pur, vous pouvez faire ce qui suit: 

tr:nth-child(even) {
    background-color: #000000;
}

Remarque: Aucun appui dans IE 8.

Ou, si vous avez jQuery:

$(document).ready(function()
{
  $("tr:even").css("background-color", "#000000");
});
716
répondu Russell Dias 2017-09-15 09:48:39

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

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

Dans les premiers jours de :nth-child() son prise en charge du navigateur était un peu pauvre. C'est pourquoi le réglage class="odd" est devenu une technique si courante. Fin 2013, je suis heureux de dire que IE6 et IE7 sont finalement morts (ou assez malades pour arrêter de s'en soucier) mais IE8 est toujours là-heureusement, c'est la seule exception.

120
répondu Álvaro González 2013-12-04 16:30:20

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 Facile et plus rapide que les exemples jQuery.

30
répondu bmich72 2014-03-21 20:02:33

Puis-je écrire mon html comme ceci avec use css ?

Oui vous pouvez, mais vous devez alors utiliser l':nth-child() pseudo sélecteur (qui a un support limité tout de même):

table.alternate_color tr:nth-child(odd) td{
   /* styles here */
}
table.alternate_color tr:nth-child(even) td{
   /* styles here */
}
12
répondu Sarfraz 2010-06-21 11:45:24 
<script type="text/javascript">
$(function(){
  $("table.alternate_color tr:even").addClass("d0");
   $("table.alternate_color tr:odd").addClass("d1");
});
</script>
9
répondu Pranay Rana 2010-06-21 11:43:34

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>
9
répondu Sriwantha Attanayake 2014-04-23 08:06:31

Nous pouvons utiliser les 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;
}

À l'Aide 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>
7
répondu Santosh Khalse 2017-01-17 07:36:46

Vous pouvez utiliser les sélecteurs nth-child(odd/even) mais tous les navigateurs ( ie 6-8, ff v3.0) ne supportent pas ces règles, d'où la raison pour laquelle la plupart des solutions retombent sur une forme de solution javascript/jQuery pour ajouter les classes aux lignes de ces navigateurs non conformes pour obtenir l'effet Tiger stripe.

3
répondu redsquare 2010-06-21 11:41:55

Il y a 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 itérer à travers les résultats qui sont ensuite chargés dans la table. Ajoutez simplement un appel de fonction comme ceci: 

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

Ajoutez ensuite la fonction au fichier de page ou 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 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 aide.

3
répondu mark 2013-03-13 16:06:11