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

124

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?

css twitter-bootstrap html-table

— drake035
source

116

.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)

— Florin
source

100

Ne fais pas ça. La prochaine fois que vous mettez à niveau bootstrap, vous perdrez votre remplacement personnalisé. Mieux vaut avoir un css personnalisé dans un fichier séparé que vous mettez directement après bootstrap.css dans la tête.

— Ben Thurley

Comment changeriez-vous la couleur d'arrière-plan pour survoler toute la ligne ici?

— Barry Michael Doyle

2

cette page explique comment faire pour un survol [ stackoverflow.com/questions/15643037/…

— Yvon Huynh

4

C'était la réponse dont j'avais besoin, cependant, je l'ai ajoutée à un fichier CSS séparé, pas au CSS Bootstrap. C'est en cascade, donc si je l'ajoute après le bootstrap, cela fonctionne parfaitement et le garde hors du bootstrap principal. De plus, je n'ai pas à transporter mon propre bootstrap modifié à la place, j'ajoute simplement mon css à chaque projet qui en a besoin.

— raddevus

Ne modifiez jamais directement une bibliothèque tierce. Jamais! Remplacez simplement le style dans votre propre fichier css.

— Mehrdad

133

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
 }

— kyriakos
source

fonctionne bien pour écraser la couleur de la table d'amorçage par défaut. Je vous remercie.

— euccas

Cela désactive la classe "table-hover" sur les lignes paires ... y a-t-il un correctif?

— exSnake

14

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;

— Lucas S.
source

11

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

— Eisa Adil
source

Cela n'a pas fonctionné pour moi. La réponse de kyriakos fonctionne vraiment bien.

— varagrawal

Cet exemple n'a pas la balise

— tbody

le> signifie enfant immédiat, donc s'il y a une balise tbody entre table et tr, cela ne fonctionnera pas. mais supprimez simplement le>, et il sera valide pour tous les tr sous une table spécifiée, peu importe s'ils sont des enfants immédiats ou non.

— jumps4fun

3

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.

3

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

— sammani anuththara
source

Cela désactiver la classe de survol de table de bootstrap, il existe un moyen d'utiliser les deux?

— exSnake

3

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

— David Morrow
source

2

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 à: entrez la description de l'image ici

— John Lehmann
source

2

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

— Anna Costalonga
source

0

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.

— PhPGuy
source

0

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

Ajoutez des tr balises vides avant votre table tr.

— Royal_MGH
source