Tableau Bootstrap rayé: Comment changer la couleur de fond de la bande?

Avec la classe Bootstrap table-striped, toutes les autres lignes de ma table ont une couleur d'arrière-plan égale à #F9F9F9. Comment puis-je changer cette couleur?

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
   background-color: red;
}

changez cette ligne dans bootstrap.css ou vous pouvez utiliser (impair) ou (pair) au lieu de (2n + 1)

Ajoutez le style CSS suivant après le chargement de Bootstrap:

.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
   background-color: red; // Choose your own color here
 }

Si vous utilisez Bootstrap 3, vous pouvez utiliser la méthode de Florin ou utiliser un fichier CSS personnalisé.

Si vous utilisez Bootstrap less source au lieu de fichiers css traités, vous pouvez le modifier directement dans bootstrap/less/variables.less.

Trouvez quelque chose comme:

//** Background color used for `.table-striped`.
@table-bg-accent:               #f9f9f9;

Vous avez deux options, soit vous remplacez les styles par une feuille de style personnalisée, soit vous modifiez le fichier css d'amorçage principal. Je préfère le premier.

Vos styles personnalisés doivent être liés après le bootstrap.

<link rel="stylesheet" src="bootstrap.css">
<link rel="stylesheet" src="custom.css">

Dans custom.css

.table-striped>tr:nth-child(odd){
   background-color:red;
}

Ne personnalisez pas votre CSS bootstrap en éditant directement le fichier CSS bootstrap.Au lieu de cela, je suggère de copier coller le CSS bootstrap et de les enregistrer dans un dossier CSS différent et là, vous pouvez personnaliser ou modifier les styles adaptés à vos besoins.

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
  background-color: #e08283;
  color: white;
}
.table-striped>tbody>tr:nth-child(even)>td,
.table-striped>tbody>tr:nth-child(even)>th {
  background-color: #ECEFF1;
  color: white;
}

Utilisez «pair» pour changer la couleur des lignes paires et utilisez «impair» pour changer la couleur des lignes impaires.

Supprimer le tableau par bandes Il remplace vos tentatives de changement de couleur de ligne.

Ensuite, faites cela en css

   tr:nth-child(odd) {
    background-color: lightskyblue;
    }

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

    th {
       background-color: lightseagreen;
    }

J'ai trouvé que ce motif en damier (en tant que sous-ensemble de la bande zébrée) était un moyen agréable d'afficher un tableau à deux colonnes. Ceci est écrit en utilisant MOINS de CSS et supprime toutes les couleurs de la couleur de base.

@base-color: #0000ff;
@row-color: lighten(@base-color, 40%);    
@other-row: darken(@row-color, 10%);

tbody {
    td:nth-child(odd) { width: 45%; }
    tr:nth-child(odd) > td:nth-child(odd) {
        background: darken(@row-color, 0%); }
    tr:nth-child(odd) > td:nth-child(even) {
        background: darken(@row-color, 7%); }
    tr:nth-child(even) > td:nth-child(odd) {
        background: darken(@other-row, 0%); }
    tr:nth-child(even) > td:nth-child(even) {
        background: darken(@other-row, 7%); }
}

Notez que j'ai laissé tomber le .table-striped, mais cela ne semble pas avoir d'importance.

Ressemble à:

Avec Bootstrap 4, la configuration css responsable de bootstrap.cssfor .table-stripedest:

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

Pour une solution très simple, je viens de le copier dans mon custom.cssfichier et de modifier les valeurs de background-color, de sorte que maintenant j'ai une teinte bleu clair plus sophistiquée:

.table-striped tbody tr:nth-of-type(odd) {
  background-color:  rgba(72, 113, 248, 0.068);
}

Si vous voulez réellement inverser les couleurs, vous devez ajouter une règle qui rend les lignes "impaires" blanches ainsi que les lignes "paires" de la couleur que vous voulez.

Moyen le plus simple pour changer l'ordre des rayures:

Ajoutez des tr balises vides avant votre table tr.