テーブルの1つのセルをホバリングする

Question

テーブルの1つのセルにどのようにホバーすることができますか？私は行のすべてをホバーしたくない。ここに私のテーブルの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> 

注：私はホバーのためのブートストラップを使用しています。 （ブートストラップを使用せずに問題を解決できるかどうかは関係ありません）

Answer 1

ブートストラップルールをセレクタstrong enough : see specifityで上書きする必要があります。

最初にここにリセットするためにtr:hoverているように見える：

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

そして、ここで使用されるすべての属性を使用して、あなたのTDSに必要なルールを適用します（クラス、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>

お知らせ：私はrowspanとに関するテーブルのコードを更新の値（colspan="1"は設定されていないので、defaut値です）

Answer 2

TDエレメントにフォーマットを適用します。

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

トリックを行う必要があります

Answer 3

...

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

そのクラスここtable-hover<table class="table table-hover table-bordered">

を削除この

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

をお試しください

Answer 5

あなたは重要なことができます。

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