Schwebt nur eine Zelle einer Tabelle

Question

Wie kann ich nur eine Zelle einer Tabelle schweben lassen? Ich möchte nicht die ganze Reihe schweben. Hier ist meine Tabelle HTML:

<table class="table table-hover table-bordered"> 
    <thead> 
     <tr> 
      <th class="danger" colspan="4">Comprobante de Pago</th> 
     </tr> 
    </thead> 
     <tr> 
      <td class="warning" width="10%">Fecha:</td> 
      <td colspan="2" id="vertical_align">sdf</td> 
     </tr> 
     <tr> 
      <td rowspan="3" colspan="1" class="asd">Client</td> 
      <td colspan="1">NAME</td> 
      <td colspan="1">NAME 2</td> 
     </tr> 
     <tr> 
      <td colspan="2">asd</td>  
     </tr> 
     <tr class="info"> 
      <td colspan="3">asd</td> 
     </tr> 

Hinweis: Ich bin mit Bootstrap für den Schwebe. (Es macht mir nichts aus, wenn das Problem ohne Bootstrap behoben werden kann.)

Answer 1

Sie müssen bootsrap Regeln mit einer Wahl strong enough : see specifity zu überschreiben.

Scheint tr:hover zu werden hier zunächst zurück:

.table.table-hover.table-bordered tr:hover {/* selector strong enough to overwrite bootsrap rule */ 
    background:none;/* remove bg */ 
} 

dann die Regel, die Sie Ihre tds müssen anwenden, alle Attribute hier verwendet mit (Klasse, id, colspan, rowspan, ...)

.table.table-hover.table-bordered tr:hover { 
 
    background: none; 
 
} 
 
td:hover { 
 
    background: lightgray; 
 
} 
 
/* a few selector examples */ 
 
td[colspan]:hover { 
 
    background: lime; 
 
} 
 
td[colspan] + td[colspan]:hover { 
 
    background:turquoise; 
 
} 
 
td[colspan="2"]:hover { 
 
    background: gold; 
 
} 
 
td[rowspan]:hover { 
 
    background: tomato; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<table class="table table-hover table-bordered"> 
 
    <thead> 
 
    <tr> 
 
     <th class="danger" colspan="3">Comprobante de Pago</th> 
 
    </tr> 
 
    </thead> 
 
    <tr> 
 
    <td class="warning" width="10%">Fecha:</td> 
 
    <td colspan="2" id="vertical_align">sdf</td> 
 
    </tr> 
 
    <tr> 
 
    <td rowspan="3" class="asd">Client</td> 
 
    <td colspan="1">NAME</td> 
 
    <td colspan="1">NAME 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">asd</td> 
 
    </tr> 
 
    <tr class="info"> 
 
    <td colspan="2">asd</td> 
 
    </tr> 
 
</table>

Hinweis: i den Tabellencode über rowspan undaktualisiertWerte (colspan="1" nicht einmal nedd gesetzt werden, ist es defaut Wert)

Answer 2

Wenden Sie die Formatierung auf das TD-Element.

.table td:hover{ 
    background-color: green; 
} 

Answer 3

, die den Trick tun sollten ...

table tr td:hover{ 
 
    background-color:red; 
 
    }

<table class="table table-hover table-bordered"> 
 
     <thead> 
 
      <tr> 
 
       <th class="danger" colspan="4">Comprobante de Pago</th> 
 
      </tr> 
 
     </thead> 
 
      <tr> 
 
       <td class="warning" width="10%">Fecha:</td> 
 
       <td colspan="2" id="vertical_align">sdf</td> 
 
      </tr> 
 
      <tr> 
 
       <td rowspan="3" colspan="1" class="asd">Client</td> 
 
       <td colspan="1">NAME</td> 
 
       <td colspan="1">NAME 2</td> 
 
      </tr> 
 
      <tr> 
 
       <td colspan="2">asd</td> 
 

 
      </tr> 
 
      <tr class="info"> 
 
       <td colspan="3">asd</td> 
 
      </tr> 
 

 
</table>

Answer 4

Versuchen Sie, diese

table td:hover{ 
    background-color: magenta; 
} 

dann die Klasse entfernen table-hover hier <table class="table table-hover table-bordered">

Answer 5

können Sie wichtig verwenden.

.table td:hover{ 
    background-color: red !important; 
}