CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jc John
Jc John

Reputation: 1859

removing the hover of th from bootstrap table hover class

all i want is to remove this <th></th> hover element. I am using a bootstrap table class table hover and works fine but all i want is to remove the hover in table headers. I tried such many css like this . I am using Bootstrap v3.3.7 (http://getbootstrap.com)

.table th:hover {
     background-color: none !important;   
}

also this 

   .table tbody tr:hover th {
  background-color: transparent;
}

and etc.

.table tbody tr:hover th {
  background-color: transparent;
}

Upvotes: 8

Views: 29142

Answers (5)

Thabo Moyo
Thabo Moyo

Reputation: 303

I think the 'unset' value is what you are looking for.

Add this to your CSS. '!important' might not be necessary, avoid it if you can.

.remove-table-hover tr:hover{
   background-color: unset !important;
}

Then in your HTML, add the class to your table element.

<table class="table remove-table-hover">
...
</table>

Upvotes: 2

Pimpfru
Pimpfru

Reputation: 385

I haven't tested any other Bootstrap versions prior to 5. As for Bootstrap 5 you may just use

.table th:hover {
    box-shadow: none;
}

Upvotes: 0

Malachi
Malachi

Reputation: 7

.table-hover thead tr th:hover, .table-hover thead tr:hover th, .table-hover thead tr:hover td, .table-hover thead tr td:hover
 {
    background-color: none !important;   
}

Upvotes: -2

Guruling Kumbhar
Guruling Kumbhar

Reputation: 1049

to remove the <th></th> hover, put the Header <tr> inside the <thead> tag. And other <tr>'s inside the <tbody>.

Try this - 

  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

Upvotes: 3

DavidG
DavidG

Reputation: 118957

From the documentation, Bootstrap only applies a hover effect on table rows if the table has the table-hover class, for example:

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

So you just need to remove that class. If you are not able to do that, then you could override with some CSS like this:

.table-hover>tbody>tr:hover {
    background-color: #ffffff; /* Assuming you want the hover color to be white */
}

Note that any rows in the header do not have a hover style applied, but you need to ensure your table looks like this:

<table class="table table-hover">
    <thead>
        <tr><th>head cell</th></tr>
    </thead>
    <tbody>
        <tr><td>body cell</td></tr>
    </tbody>
</table>

If your header rows are not at the top of the table, you could also override them with a special class:

.table-hover>tbody>tr.no-hover:hover {
    background-color: #ffffff;
}

And example of usage:

<table class="table table-hover">
    <tr><td>body cell</td></tr>
    <tr class="no-hover"><th>head cell</th></tr>
    <tr><td>body cell</td></tr>
</table>

Upvotes: 16

Related Questions