web-dev-qa-db-fra.com

Bootstrap tableau rayé: Comment changer la couleur d'arrière-plan des bandes?

Avec Bootstrap class table-striped, une couleur d'arrière-plan sur chaque ligne de mon tableau est égale à #F9F9F9. Comment puis-je changer cette couleur?

csstwitter-bootstraphtml-table
108
drake035
.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)

102
Florin

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
 }
126
kyriakos

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

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;
}
11
Eisa Adil

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

Trouvez quelque chose comme:

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

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 toutes les couleurs de la couleur de base sont supprimées.

@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 à: enter image description here

2
John Lehmann

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

2
user2338925
.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.

1
sammani anuththara

Si vous souhaitez 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 souhaitée.

0
PhPGuy