Изменить цвет фона в строках, но не на заголовки строк

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

ИЛИ каждый второй ряд + наклонный

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