Thay đổi màu nền trên hàng, nhưng không thay đổi tiêu đề hàng

Question

Tôi đang cố thay đổi màu nền của các hàng trong bảng bằng css, nhưng tôi không muốn thay đổi nền của tiêu đề bảng. Tuy nhiên, theo mặc định, TH được bọc trong một TR, vì vậy quy tắc TR được đẩy tới TH của tôi.

Dưới đây là một jsfiddle để kiểm tra với, nếu nó giúp: http://jsfiddle.net/jomanlk/Bcayc/

Answer 1

Bạn có thể thêm <thead> và <tbody> differenciate hàng tiêu đề của bạn từ các hàng dữ liệu. Bằng cách này bạn có thể nhắm mục tiêu chỉ có những người mong muốn:

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

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

DEMO

Cùng với việc đánh dấu sau:

<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

Hình như phương pháp tốt nhất đã được thông báo bằng thead và tbody.

Ngoài ra, như một khái niệm, bạn có thể thêm một lớp học để header-tr, và xác định màu nền tĩnh, diễn ra sau khi tình trạng di chuột trong .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

HOẶC mỗi hàng thứ hai + di chuột

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