Entfernen des Hover th von Bootstrap-Tabelle Hover-Klasse

alles, was ich will, ist dieses <th></th> Hover-Element zu entfernen. Ich benutze eine Bootstrap-Tabelle Klassen-Hover und funktioniert gut, aber alles was ich will, ist den Hover in Tabellenköpfen zu entfernen. Ich habe so viele CSS so probiert. Ich bin mit Bootstrap v3.3.7 (http://getbootstrap.com)Entfernen des Hover th von Bootstrap-Tabelle Hover-Klasse

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

auch dieser

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

usw.

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

Quelle

2016-09-29 Jc John

, als Sie für Ihre Antwort Sir. Bitte lies meine Frage. Ich möchte nur den Schwebeflug in der Tabellenüberschrift deaktivieren –

Nur eine Bemerkung: th ist Children von thead tr und nicht tbody;) –

Von the documentation, Bootstrap gilt nur einen Hover-Effekt auf Tabellenzeilen, wenn die Tabelle hat die table-hover Klasse, zum Beispiel:

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

Sie müssen nur diese Klasse entfernen. Wenn Sie nicht in der Lage sind, das zu tun, dann könnte man mit etwas CSS wie dies außer Kraft setzen:

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

Beachten Sie, dass alle Zeilen im Header nicht hat einen Hover-Stil angewandt, aber Sie müssen Ihre Tabelle, um sicherzustellen, das wie folgt aussieht:

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

Wenn Ihre Kopfzeilen nicht an der Spitze der Tabelle sind, können Sie diese auch mit einer Sonderklasse außer Kraft setzen:

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

Und Beispiel für die Nutzung:

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

Quelle

2016-09-29 01:12:37 DavidG

danke für Ihre Antwort Sir. Ich möchte nur den Hover in –

entfernen OK, ich habe es etwas geklärt. Beachten Sie, dass der Hover auf "tr" steht, nicht auf "th" oder "td". Sie müssen also der Tabelle mitteilen, welche Zeilen sich in der Kopfzeile befinden. – DavidG

danke für Ihre großartige Erklärung Sir –

die <th></th> schweben, legte den Kopf <tr> innerhalb des <thead>-Tag zu entfernen. Und andere <tr> ist innerhalb der <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>

Quelle

2016-09-29 01:33:14

Entfernen des Hover th von Bootstrap-Tabelle Hover-Klasse

Antwort

Verwandte Themen