web-dev-qa-db-fra.com

Autre couleur de ligne de table en utilisant CSS?

J'utilise une table avec une couleur de rangée différente 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. Quand j'utilise class pour table, cela s'applique à tr alternative.

Puis-je écrire mon code 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 faire en sorte que les lignes comportent des "zébrures" à l'aide de CSS?

htmlcsshtml-table
438
Kali Charan Rajput
$(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 existe un sélecteur CSS, en réalité 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");
});
741
Russell Dias

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

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

Au début de :nth-child() sa support du navigateur était plutôt pauvre. C'est pourquoi la configuration de class="odd" est devenue une technique si courante. Fin 2013, je suis heureux de dire qu'IE6 et IE7 sont enfin morts (ou suffisamment malades pour cesser de s'en préoccuper), mais IE8 est toujours là - heureusement, c'est la seule exception.

143
Álvaro González

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.

34
bmich72

puis-je écrire mon code HTML comme celui-ci avec css?

Oui, vous pouvez, 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 */
}
13
Sarfraz

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

   <style type="text/css">
      tr:nth-child(2n) {
             background-color: #FFEBCD;
        }
</style>
10
Sriwantha Attanayake

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

tilisation de CSS

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

tilisation 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>
10
Santosh Khalse
<script type="text/javascript">
$(function(){
  $("table.alternate_color tr:even").addClass("d0");
   $("table.alternate_color tr:odd").addClass("d1");
});
</script>
9
Pranay Rana

Il existe un moyen assez facile de faire cela 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 le résultat.

La sortie dynamique de la base de données comportera une boucle for pour parcourir les résultats qui seront 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.

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 les couleurs de chaque nouvelle ligne du tableau généré.

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.

3
mark

Vous pouvez utiliser les sélecteurs nth-child (impair/pair), mais tous les navigateurs ( c.-à-d. 6-8, ff v3. ) ne prennent pas en charge ces règles, raison pour laquelle la plupart des solutions ont recours à une forme de javascript/jquery. solution pour ajouter les classes aux lignes pour que ces navigateurs non conformes obtiennent l’effet rayure tigre.

3
redsquare