removing the hover of th from bootstrap table hover class

Question

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;
}

Answer 1

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>

Answer 2

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>