Bootstrap table-hover not working
I am using bootstrap 3.3.4 and I have a problem. If I check the bootstrap.css file I load there is a table-hover class but I can't use it, it just doesn't work, as I see it works with table constraint. I also checked the bootstrap.js loading. Has anyone else had the same problem? I've been trying to find him for so long. thanks in advance
+3
source to share
1 answer
In the docs on the table index, remember to add the class .table-hover
to your table element.
Also, as Daniel pointed out, bootstrap is looking for a group to group your rows because it doesn't want to apply the hover style to the header areas.
Also, for some screens, the default color may look very dim, so you can try to darken it with the following code:
.table-hover > tbody > tr:hover {
background-color: #D2D2D2;
}
Here's a working demo in stack snippets
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
+6
source to share