removing the hover of th from bootstrap table hover class

Issue

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

Solution

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>

Answered By - DavidG