Bootstrap table row hover

Question

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.

score 156 · Accepted Answer · answered Dec 06 '13 at 00:33

156

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

answered Dec 06 '13 at 00:33

jraede

6,846
5
29
32

9

Note, you have to put table-striped before table-hover or striped rows won't highlight on hover – Georgii Oleinikov Jul 21 '14 at 20:58
8

@GeorgiiOleinikov it's actually the opposite with bootstrap 3, but thanx for the tip! – GôTô Sep 13 '14 at 20:22
that works for tr inside tbody. for generated tables like asp.net gridview, it also applies to the th. – Jeff Binnig Apr 05 '21 at 14:05

Bootstrap table row hover

1 Answers1