Bootstrap table row hover
How do I make the background change of a table row in Bootstrap 3
on hover. The table class I am using right now is table table-striped
. I tried to add a extra class to the <tr>
tags within the table and made the css like this .table-row:hover{background:black;}
. Now only the non-striped rows are working. Isn't there a class in bootstrap that will allow me to easily implement this? Or should I use JQuery
to fix this? I really cannot figure this one out by myself.
Solution 1:
You need to add the table-hover
class to the <table/>
element. Like this:
<table class="table table-striped table-hover">
<tbody>
<tr>
<td>Col 1</td>
<td>Col 2 </td>
</tr>
</tbody>
</table>
Source: Documentation