Comment changer la couleur de survol d'un tableau dans Bootstrap?

106

J'ai une table avec la classe «table-hover». La couleur de survol par défaut est un blanc / gris clair. Comment changer cette couleur?

J'ai essayé d'écraser la valeur par défaut en ajoutant ce qui suit à ma feuille de style dominante

.table-hover tbody tr:hover > th {
  background-color: #D1D119;
}

Malheureusement, ce qui précède ne fonctionne pas

twitter-bootstrap Lloyd Banks
la source

Réponses:

231

Essayez ceci:

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: #color;
}
pvskisteak5
la source
4
Pourquoi le tdnécessaire? (désolé, je ne vaux rien au css, j'essaie d'apprendre)
Alexander Derck
6
@AlexanderDerck Je suppose que cela pourrait être un peu tard, mais le td est nécessaire car il est plus bas dans le dom de sa ligne, et s'il y a un arrière-plan déjà appliqué au td, alors vous ne verrez pas l'arrière-plan de la ligne car il ' ll sera peint après la rangée.
Palu Macil
18

Cela a fonctionné pour moi:

.table tbody tr:hover td, .table tbody tr:hover th {
    background-color: #eeeeea;
}
user2683780
la source
18

C'était le moyen le plus simple de le faire et cela a fonctionné pour moi.

.table-hover tbody tr:hover td {
    background: aqua;
}

Vous ne savez pas pourquoi vous voudriez changer la couleur de l'en-tête pour la même couleur de survol que les lignes, mais si vous le faites, vous pouvez utiliser les solutions ci-dessus. Si tu veux juste t

frankie4fingers
la source
6

Ceci est pour bootstrap v4 compilé via grunt ou un autre exécuteur de tâches

Vous devrez changer $table-hover-bgpour définir la surbrillance en survol

$table-cell-padding:            .75rem !default;
$table-sm-cell-padding:         .3rem !default;

$table-bg:                      transparent !default;
$table-accent-bg:               rgba(0,0,0,.05) !default;
$table-hover-bg:                rgba(0,0,0,.075) !default;
$table-active-bg:               $table-hover-bg !default;

$table-border-width:            $border-width !default;
$table-border-color:            $gray-lighter !default;
styks
la source
1
Pour quiconque tombe sur cela en utilisant npm, c'est en fait $table-hover-bg,$table-active-bg et ainsi de suite, non $table-bg-.... Je pensais que je devenais fou pendant une minute 😅
Jaymz
5

CODE HTML : 

<table class="table table-hover">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>[email protected]</td>
        </tr>
    </tbody>

CODE CSS

.table-hover thead tr:hover th, .table-hover tbody tr:hover td {
    background-color: #D1D119;
}

Le code css indique que:

passez la souris sur la ligne:

.table-hover> thead> tr: hover

la couleur d'arrière-plan deviendra # D1D119

e

La même action se produira pour le corps

.table-hover tbody tr: hover td

Tanvir Rahman
la source
Quelques explications aideraient à mieux comprendre votre réponse.
Romano Zumbé
1

essayer:

.table-hover > tbody > tr.active:hover > th {
                background-color: #color;
            }
Samuel Burgener
la source
1

Pour moi, @ pvskisteak5 a provoqué un "effet de scintillement". Pour résoudre ce problème, ajoutez ce qui suit:

            .table-hover tbody tr:hover,
            .table-hover tbody tr:hover td,
            .table-hover tbody tr:hover th{
                background:#22313F !important;
                color:#fff !important;
            }
mec
la source
1 
.table-hover tbody tr:hover td {
    background: aqua;
}

c'est la meilleure solution que je puisse trouver à ce jour.cela fonctionne parfaitement dans un tel scénario

Dennis
la source
0

Au lieu de modifier la classe de survol de table par défaut, créez une nouvelle classe (un autre déplacement) et appliquez-la à la table pour laquelle vous avez besoin de cet effet.

Code comme ci-dessous;

.anotherhover tbody tr:hover td { background: CornflowerBlue; }
MarcoZen
la source
0

Essayez la .table-hoverclasse de Bootstrap pour implémenter des lignes hoverables , par exemple

<table class="table table-hover">
  ...
</table>
Jens
la source