How do I change the hover over color for a hover over table in Bootstrap?
Twitter BootstrapTwitter Bootstrap Problem Overview
I have a table with class 'table-hover'. The default hover over color is a white / light grey. How do I change this color?
I've tried overwriting the default by adding the following to my dominant style sheet
.table-hover tbody tr:hover > th {
background-color: #D1D119;
}
Unfortunately, the above does not work
Twitter Bootstrap Solutions
Solution 1 - Twitter Bootstrap
Give this a try:
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
background-color: #color;
}
Solution 2 - Twitter Bootstrap
This was the most simple way to do it imo and it worked for me.
.table-hover tbody tr:hover td {
background: aqua;
}
Not sure why you would want to change the heading color to the same hover color as the rows but if you do then you can use the above solutions. If you just want t
Solution 3 - Twitter Bootstrap
This worked for me:
.table tbody tr:hover td, .table tbody tr:hover th {
background-color: #eeeeea;
}
Solution 4 - Twitter Bootstrap
HTML CODE:
<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>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
CSS CODE
.table-hover thead tr:hover th, .table-hover tbody tr:hover td {
background-color: #D1D119;
}
The css code indicate that:
mouse over row: > .table-hover > thead > tr:hover
background color of th will change to #D1D119 > th
Same action will happen for tbody > .table-hover tbody tr:hover td
Solution 5 - Twitter Bootstrap
This is for bootstrap v4 compiled via grunt or some other task runner
You would need to change $table-hover-bg
to set the highlight on hover
$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;
Solution 6 - Twitter Bootstrap
.table-hover tbody tr:hover td {
background: #ffffff;
}
Solution 7 - Twitter Bootstrap
try:
.table-hover > tbody > tr.active:hover > th {
background-color: #color;
}
Solution 8 - Twitter Bootstrap
For me @pvskisteak5 answer has caused a "flicker-effect". To fix this, add the following:
.table-hover tbody tr:hover,
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th{
background:#22313F !important;
color:#fff !important;
}
Solution 9 - Twitter Bootstrap
.table-hover tbody tr:hover td {
background: aqua;
}
this is the best solution i can gice so far.it works out perfectly in such scena
Solution 10 - Twitter Bootstrap
I've found that I have to overwrite a "CSS custom property" used by bootstrap that is called bs-table-accent-bg
...
.table-hover > tbody > tr:hover { --bs-table-accent-bg: #f8f8f8; }
The path is what bootstrap itself uses. I took that from inspecting the page.
Because if I did what the other solutions did, I couldn't get the highlighting to become lighter than what bootstrap already applied. This way, it works (i.e. I can get the hover color to be lighter).
Solution 11 - Twitter Bootstrap
Instead of changing the default table-hover class, make a new class ( anotherhover ) and apply it to the table that you need this effect for.
Code as below;
.anotherhover tbody tr:hover td { background: CornflowerBlue; }
Solution 12 - Twitter Bootstrap
You can do this in several ways,
- The principled and short way: use the sass in override sass variables that you need:
// Your variable overrides
$table-hover-bg: #d00; // what's that you need
$table-striped-bg: #fff;
// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";
- use the CSS variables:
.table {
--bs-table-hover-bg: #d00;
}
or
#thetable tr:hover, #thetable tr td:hover {
background-color: #d00;
}
Solution 13 - Twitter Bootstrap
Try Bootstrap’s .table-hover
class to implement hoverable rows, for example
<table class="table table-hover">
...
</table>