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

Question

Я пытаюсь изменить цвет фона строк таблицы с помощью CSS, но я не хочу менять фон заголовка таблицы. Однако по умолчанию TH помещается в TR, поэтому правило TR помещается в мой TH.

Вот jsfiddle для тестирования, если он помогает: http://jsfiddle.net/jomanlk/Bcayc/

Answer 1

Вы можете добавить <thead> и <tbody>, чтобы отличать строки заголовка от строк данных.Таким образом, вы можете выбрать только нужные:

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

ИЛИ каждый второй ряд + зависание

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

Answer 3

Похоже, лучший метод был опубликован с использованием thead и tbody.

В качестве альтернативы вы можете добавить класс в header-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>​