Change background color on rows, but not row headers

Question

I'm trying to change the background color of a table's rows using CSS, but I do not want to change a table heading's background. However, by default, a TH is wrapped in a TR, so the TR rule is pushed to my TH.

Here's a jsfiddle to test with, if it helps: http://jsfiddle.net/jomanlk/Bcayc/

Answer 1

You can add <thead> and <tbody> to differenciate your header rows from the data rows. This way you can target only the desired ones:

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

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

DEMO

Along with the following markup:

<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>​