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

user_405022 0
Viewed 89606

All,

I have an ASP.NET GridView that is rendered to an HTML table.

<table>
    <tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
    <tr><td>Data 1</td><td>Data 2</td></tr>
    <tr><td>Data 3</td><td>Data 4</td></tr>
</table>

I want to highlight the row when the mouse is hovered over it - except for the first row which is the header.

I am just getting my head wet with JQuery, and have dabbled a bit with CSS (either CSS2 or CSS3). Is there a preferred way to do this?

Can anyone give me a starting point for this?

Cheers

Andez

highlight hover html
10 Answers

Why not simply use

tr>td:hover {
/* hover effect */
background-color: lightblue;
}

This will only affect table rows with td's inside, not table rows with th's inside. Works in all browsers. Cheers, guys.

user_94299780

If your table is standard, you have a table like this:

<table>
    <thead>
        <tr>
            <th>title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>cell</th>
        </tr>
    </tbody>
</table>

so you can use this css code:

table > *:not(thead) tr:hover{
    background-color: #f5f5f5;
}
user_35324460
Related