更改行上的背景顏色，但不更改行標題

Question

我試圖使用css更改表格行的背景顏色，但我不想更改表格標題的背景。但是，默認情況下，TH被包裹在TR中，因此TR規則被推送到我的TH。

下面是一起測試的jsfiddle，如果有幫助： http://jsfiddle.net/jomanlk/Bcayc/

Answer 1

您可以添加<thead>和<tbody>從數據行differenciate您的標題行。這樣，您就只能定位到所需的：

table tbody td:hover{ 
    background: #f00; 
} 

table tbody tr:hover{ 
    background: #00f; 
}​ 

DEMO

隨着下面的標記：

<table> 
    <thead> 
     <tr> 
      <th>Col 1</th> 
      <th>Col 2</th> 
      <th>Col 3</th> 
      <th>Col 4</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Col 1</td> 
      <td>Col 2</td> 
      <td>Col 3</td> 
      <td>Col 4</td> 
     </tr> 
    </tbody> 
</table>​ 

Answer 2

看起來是最好的方法已經使用THEAD和TBODY公佈。

另外，作爲一個概念，你可以添加一個類頭-TR，並在的CSS定義靜態背景顏色，位置懸停狀態後

table td:hover{ 
    background: #f00; 
} 

table td:hover{ 
    background: #00f; 
} 

table .nohover:hover{ 
    background: #fff; 
} 

<table> 
    <tr class="nohover"> 
     <td>Col 1</td> 
     <td>Col 2</td> 
     <td>Col 3</td> 
     <td>Col 4</td> 
    </tr> 
     <tr> 
     <td>Col 1</td> 
     <td>Col 2</td> 
     <td>Col 3</td> 
     <td>Col 4</td> 
    </tr> 
</table>​ 

Answer 3

OR每第二排+懸停

tbody tr:nth-child(2n), tbody tr:hover{ 
    background-color: #e3e3e3; 
}