Bootstrap table striped: Comment puis-je changer la couleur de fond stripe?

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
 }

Vous avez deux options, soit vous remplacez les styles par une feuille de style personnalisée, soit vous modifiez le fichier CSS bootstrap principal. Je préfère l'ancien.

Vos styles personnalisés doivent être liés après 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;
}

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 directement le modifier dans bootstrap/less/variables.less.

Trouver quelque chose comme:

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

J'ai trouvé que ce motif en damier (en tant que sous-ensemble de la bande de zèbre) était un moyen agréable d'afficher une table à 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 à:

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

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 " quelle que soit la couleur que vous voulez.

.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;
}

Utiliser 'même' pour changer la couleur des lignes paires et l'utilisation "étrange" pour changer la couleur des lignes impaires.