CODEWITHSUNDEEP
htmlcsstwitter-bootstraphtml-tablebootstrap-4
Konrad Viltersten
Konrad Viltersten

Reputation: 39098

Hover highlight for tables not working in Bootstrap 4

I'm following the example Bootstrap's site and I see that the table looks differently when I add the class table to my table tag but there's nothing new going on when I add table-hover. So both of the following lines produce the same L&F (none of which highlights the row that I hover above).

<table class="table table-hover">
<table class="table">

What can I be missing?

There are no errors reported in the console, it works definitely on the page linked to, I can't see anything informative when goolearching. I'm relying on the minified files (all four CSS's and one JS plus Tether).

Upvotes: 4

Views: 3201

Answers (1)

sol
sol

Reputation: 22939

The CSS for table-hover is 

.table-hover tbody tr:hover {
   ...some change
}

Make sure your HTML has a tbody tag:

<table class="table table-hover">
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

Also consider including a thead if your table has a header. Note that .table-hover won't target rows in thead.

If you want to affect the rows on hover without changing your markup, you can try adding:

.table-hover tr:hover {
   ...some change
}

Upvotes: 5

Related Questions