HTML table highlight row on hover except first row (header)

There is a way to achieve the desired behavior without class-ing each row separately. Here’s how to highlight each table row except for first one (header) on hover using the CSS :not and :first-child selectors:

tr:not(:first-child):hover {
    background-color: red;
}

Unfortunately, IE < 9 does not support :not, so to do this in a cross-browser way, you can use something like this:

tr:hover {
    background-color: red;
}
tr:first-child:hover {
    background-color: white;
}

Basically, the first CSS rule includes all rows. To avoid highlighting the first row, you override the its hover style by selecting with tr:first-child and then keeping its background-color to white (or whatever the non-highlighted row’s color is).

I hope that helped, too!