HTML table highlight row on hover except first row (header)
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
html hover highlight
asked Aug 9 '12 at 9:58
AndezAndez
2,471145488
add a comment |
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
html hover highlight
asked Aug 9 '12 at 9:58
AndezAndez
2,471145488
add a comment |
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
html hover highlight
asked Aug 9 '12 at 9:58
AndezAndez
2,471145488
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
html hover highlight
html hover highlight
asked Aug 9 '12 at 9:58
AndezAndez
2,471145488
asked Aug 9 '12 at 9:58
AndezAndez
2,471145488
asked Aug 9 '12 at 9:58
AndezAndez
2,471145488
asked Aug 9 '12 at 9:58
AndezAndez
2,471145488
asked Aug 9 '12 at 9:58
AndezAndez
2,471145488
2,471145488
add a comment |
add a comment |
9 Answers
9
active
oldest
votes
You can do this using the CSS :hover specifier. Here's a demonstration:
<table>
<tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
<tr class = "notfirst"><td>Data 1</td><td>Data 2</td></tr>
<tr class = "notfirst"><td>Data 3</td><td>Data 4</td></tr>
</table>
CSS:
.notfirst:hover {
background-color: red;
}
answered Aug 9 '12 at 10:03
ChrisChris
22.8k44567
Yeah, I thought about this - css class on each row except for the first one. Was hoping there was some sort of advanced CSS to do this. Cheers
– Andez
Aug 10 '12 at 10:48
@Andez Actually there is a way to do without specifying a class to each row. Please take a look at my new answer.
– Chris
Aug 10 '12 at 13:01
-1, you should be specifying the row not to be affected to hover, not specifying n number of rows that should.
– Robbie Averill
May 29 '14 at 2:57
@scrowler this was only one of the two solutions I had provided. See second answer.
– Chris
May 29 '14 at 17:05
@Chris fair enough, I see that. I've +1'd your other answer.
– Robbie Averill
May 29 '14 at 20:55
|
show 5 more comments
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!
answered Aug 10 '12 at 13:06
ChrisChris
22.8k44567
Thanks, I do like this solution also. +1
– Andez
Aug 15 '12 at 8:32
6
Mind that this won't work where the markup is<table> <thead><th>foo</th> ... </thead> <tbody> <tr>bar</tr> ... </tbody> </table>. If that's your markup use - much simpler -tbody tr:hoverselector.
– koniu
Mar 23 '15 at 8:39
3
This should be the marked answer.
– BritishSteel
Jan 25 '16 at 15:16
That is better answer. Thanks, it works for me very well.
– kevin
Dec 27 '17 at 6:08
Doesn't work if you use tables with<thead></thead>
– user2924019
May 16 '18 at 14:38
add a comment |
To expand on user2458978's answer surely the best way of doing this is to code up the tables correctly.
<table>
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
Then the CSS is simply
table tbody tr:hover { background-color: red; }
Here's a jsFiddle example
edited Oct 9 '17 at 5:46
Cœur
17.8k9106145
answered Aug 13 '13 at 13:17
MorvaelMorvael
1,87122040
How can I make it by using class name? I added class name -jsfiddle.net/bzamfir/2c2jU - but now the highlight is no longer working. Thanks for help
– bzamfir
Feb 28 '14 at 22:10
2
Sorry - might be too late now. The CSS in your Fiddle example is slightly off, .hover table tbody tr:hover { background-color: red; } should just be .hover tbody tr:hover { background-color: red; } as the table is not a child element of the element with the class .hover
– Morvael
Mar 11 '14 at 11:28
1
This should be the correct answer.
– swdon
Aug 25 '16 at 17:37
1
This is the correct way to have a table and thus this is the best answer.
– user2924019
May 16 '18 at 14:37
add a comment |
1. Place header tr inside thead tag
2. Place other tr inside tbody tag
3. Use following css
table tr:not(thead):hover {
background-color: #B0E2FF;
}
edited May 29 '14 at 3:05
Robbie Averill
20.8k74076
answered Jun 6 '13 at 9:46
user2458978user2458978
22934
9
This did it for me:table tbody tr:hover { background-color: #B0E2FF; }
– egallardo
Aug 23 '13 at 3:33
:not(thead)is fine as jQuery selector but neither chromium nor firefox seem too impressed.table tbody tr:hoverworks just fine however - good comment.
– koniu
Mar 23 '15 at 8:31
add a comment |
Use jQuery to add a class to the parent element of the td (wont select th)
$('td').hover(function(){
$(this).parent().addClass('highlight');
}, function() {
$(this).parent().removeClass('highlight');
});
Then add the CSS class
.highlight {
background:red;
}
answered Aug 9 '12 at 10:04
Oliver MillingtonOliver Millington
3,69541425
1
This is overkill, IMHO.
– Chris
Aug 9 '12 at 10:06
3
From the question it seems like he wants to learn a bit of jQuery that's why I'm using it, personally I wouldn't downvote an answer that would enhance someones knowledge even if you see it as overkill but hey whatever floats your boat.
– Oliver Millington
Aug 9 '12 at 10:09
I agree that it's good for learning more about jQuery.
– Chris
Aug 9 '12 at 10:14
I'm gonna +1 that thanks - more information. Wouldn't say overkill - a useful insight.
– Andez
Aug 9 '12 at 10:23
That would be very bad for people to copy paste this in their code. CSS is the proper way to go using:hoverand:first-child. Overkill;
– Alexis Paques
Jan 9 at 19:48
add a comment |
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.
answered Nov 22 '18 at 23:57
Lars TuffLars Tuff
293
This would highlight the single cells, while I think it would be better to highlight the entire row while hovering over any cell of it.
– umbe1987
Dec 5 '18 at 16:53
add a comment |
Why not something like:
tr:first-child ~ tr { background-color:#fff; }
answered Jan 8 '14 at 18:10
user3174546user3174546
1
add a comment |
As of my requirement, I have to highlight all the even rows except header row.
Hence, this answer might not be suitable to the above question.
Even then, I am giving my answer here with the hope that somebody else can use my answer if they encounter this page in search engine search.
My answer is:
$("#tableName tr:even").not("tr:nth(0)").addClass("highlight");
answered Dec 31 '14 at 9:20
Ashok kumarAshok kumar
75221543
add a comment |
Use TH tag for first row and do that:
th {
background-color:#fff;
}
For all others rows:
tr:not(:first-child):hover {
background-color:#eee;
}
or
tr:hover td {
background-color:#eee;
}
answered Apr 30 '13 at 19:45
phsairesphsaires
1,2241011
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f11880892%2fhtml-table-highlight-row-on-hover-except-first-row-header%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
9 Answers
9
active
oldest
votes
9 Answers
9
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can do this using the CSS :hover specifier. Here's a demonstration:
<table>
<tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
<tr class = "notfirst"><td>Data 1</td><td>Data 2</td></tr>
<tr class = "notfirst"><td>Data 3</td><td>Data 4</td></tr>
</table>
CSS:
.notfirst:hover {
background-color: red;
}
answered Aug 9 '12 at 10:03
ChrisChris
22.8k44567
Yeah, I thought about this - css class on each row except for the first one. Was hoping there was some sort of advanced CSS to do this. Cheers
– Andez
Aug 10 '12 at 10:48
@Andez Actually there is a way to do without specifying a class to each row. Please take a look at my new answer.
– Chris
Aug 10 '12 at 13:01
-1, you should be specifying the row not to be affected to hover, not specifying n number of rows that should.
– Robbie Averill
May 29 '14 at 2:57
@scrowler this was only one of the two solutions I had provided. See second answer.
– Chris
May 29 '14 at 17:05
@Chris fair enough, I see that. I've +1'd your other answer.
– Robbie Averill
May 29 '14 at 20:55
|
show 5 more comments
You can do this using the CSS :hover specifier. Here's a demonstration:
<table>
<tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
<tr class = "notfirst"><td>Data 1</td><td>Data 2</td></tr>
<tr class = "notfirst"><td>Data 3</td><td>Data 4</td></tr>
</table>
CSS:
.notfirst:hover {
background-color: red;
}
answered Aug 9 '12 at 10:03
ChrisChris
22.8k44567
Yeah, I thought about this - css class on each row except for the first one. Was hoping there was some sort of advanced CSS to do this. Cheers
– Andez
Aug 10 '12 at 10:48
@Andez Actually there is a way to do without specifying a class to each row. Please take a look at my new answer.
– Chris
Aug 10 '12 at 13:01
-1, you should be specifying the row not to be affected to hover, not specifying n number of rows that should.
– Robbie Averill
May 29 '14 at 2:57
@scrowler this was only one of the two solutions I had provided. See second answer.
– Chris
May 29 '14 at 17:05
@Chris fair enough, I see that. I've +1'd your other answer.
– Robbie Averill
May 29 '14 at 20:55
|
show 5 more comments
You can do this using the CSS :hover specifier. Here's a demonstration:
<table>
<tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
<tr class = "notfirst"><td>Data 1</td><td>Data 2</td></tr>
<tr class = "notfirst"><td>Data 3</td><td>Data 4</td></tr>
</table>
CSS:
.notfirst:hover {
background-color: red;
}
answered Aug 9 '12 at 10:03
ChrisChris
22.8k44567
You can do this using the CSS :hover specifier. Here's a demonstration:
<table>
<tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
<tr class = "notfirst"><td>Data 1</td><td>Data 2</td></tr>
<tr class = "notfirst"><td>Data 3</td><td>Data 4</td></tr>
</table>
CSS:
.notfirst:hover {
background-color: red;
}
answered Aug 9 '12 at 10:03
ChrisChris
22.8k44567
edited Aug 9 '12 at 12:05
answered Aug 9 '12 at 10:03
ChrisChris
22.8k44567
answered Aug 9 '12 at 10:03
ChrisChris
22.8k44567
answered Aug 9 '12 at 10:03
ChrisChris
22.8k44567
22.8k44567
Yeah, I thought about this - css class on each row except for the first one. Was hoping there was some sort of advanced CSS to do this. Cheers
– Andez
Aug 10 '12 at 10:48
@Andez Actually there is a way to do without specifying a class to each row. Please take a look at my new answer.
– Chris
Aug 10 '12 at 13:01
-1, you should be specifying the row not to be affected to hover, not specifying n number of rows that should.
– Robbie Averill
May 29 '14 at 2:57
@scrowler this was only one of the two solutions I had provided. See second answer.
– Chris
May 29 '14 at 17:05
@Chris fair enough, I see that. I've +1'd your other answer.
– Robbie Averill
May 29 '14 at 20:55
|
show 5 more comments
Yeah, I thought about this - css class on each row except for the first one. Was hoping there was some sort of advanced CSS to do this. Cheers
– Andez
Aug 10 '12 at 10:48
@Andez Actually there is a way to do without specifying a class to each row. Please take a look at my new answer.
– Chris
Aug 10 '12 at 13:01
-1, you should be specifying the row not to be affected to hover, not specifying n number of rows that should.
– Robbie Averill
May 29 '14 at 2:57
@scrowler this was only one of the two solutions I had provided. See second answer.
– Chris
May 29 '14 at 17:05
@Chris fair enough, I see that. I've +1'd your other answer.
– Robbie Averill
May 29 '14 at 20:55
Yeah, I thought about this - css class on each row except for the first one. Was hoping there was some sort of advanced CSS to do this. Cheers
– Andez
Aug 10 '12 at 10:48
Yeah, I thought about this - css class on each row except for the first one. Was hoping there was some sort of advanced CSS to do this. Cheers
– Andez
Aug 10 '12 at 10:48
@Andez Actually there is a way to do without specifying a class to each row. Please take a look at my new answer.
– Chris
Aug 10 '12 at 13:01
@Andez Actually there is a way to do without specifying a class to each row. Please take a look at my new answer.
– Chris
Aug 10 '12 at 13:01
-1, you should be specifying the row not to be affected to hover, not specifying n number of rows that should.
– Robbie Averill
May 29 '14 at 2:57
-1, you should be specifying the row not to be affected to hover, not specifying n number of rows that should.
– Robbie Averill
May 29 '14 at 2:57
@scrowler this was only one of the two solutions I had provided. See second answer.
– Chris
May 29 '14 at 17:05
@scrowler this was only one of the two solutions I had provided. See second answer.
– Chris
May 29 '14 at 17:05
@Chris fair enough, I see that. I've +1'd your other answer.
– Robbie Averill
May 29 '14 at 20:55
@Chris fair enough, I see that. I've +1'd your other answer.
– Robbie Averill
May 29 '14 at 20:55
|
show 5 more comments
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!
answered Aug 10 '12 at 13:06
ChrisChris
22.8k44567
Thanks, I do like this solution also. +1
– Andez
Aug 15 '12 at 8:32
6
Mind that this won't work where the markup is<table> <thead><th>foo</th> ... </thead> <tbody> <tr>bar</tr> ... </tbody> </table>. If that's your markup use - much simpler -tbody tr:hoverselector.
– koniu
Mar 23 '15 at 8:39
3
This should be the marked answer.
– BritishSteel
Jan 25 '16 at 15:16
That is better answer. Thanks, it works for me very well.
– kevin
Dec 27 '17 at 6:08
Doesn't work if you use tables with<thead></thead>
– user2924019
May 16 '18 at 14:38
add a comment |
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!
answered Aug 10 '12 at 13:06
ChrisChris
22.8k44567
Thanks, I do like this solution also. +1
– Andez
Aug 15 '12 at 8:32
6
Mind that this won't work where the markup is<table> <thead><th>foo</th> ... </thead> <tbody> <tr>bar</tr> ... </tbody> </table>. If that's your markup use - much simpler -tbody tr:hoverselector.
– koniu
Mar 23 '15 at 8:39
3
This should be the marked answer.
– BritishSteel
Jan 25 '16 at 15:16
That is better answer. Thanks, it works for me very well.
– kevin
Dec 27 '17 at 6:08
Doesn't work if you use tables with<thead></thead>
– user2924019
May 16 '18 at 14:38
add a comment |
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!
answered Aug 10 '12 at 13:06
ChrisChris
22.8k44567
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!
answered Aug 10 '12 at 13:06
ChrisChris
22.8k44567
answered Aug 10 '12 at 13:06
ChrisChris
22.8k44567
answered Aug 10 '12 at 13:06
ChrisChris
22.8k44567
answered Aug 10 '12 at 13:06
ChrisChris
22.8k44567
22.8k44567
Thanks, I do like this solution also. +1
– Andez
Aug 15 '12 at 8:32
6
Mind that this won't work where the markup is<table> <thead><th>foo</th> ... </thead> <tbody> <tr>bar</tr> ... </tbody> </table>. If that's your markup use - much simpler -tbody tr:hoverselector.
– koniu
Mar 23 '15 at 8:39
3
This should be the marked answer.
– BritishSteel
Jan 25 '16 at 15:16
That is better answer. Thanks, it works for me very well.
– kevin
Dec 27 '17 at 6:08
Doesn't work if you use tables with<thead></thead>
– user2924019
May 16 '18 at 14:38
add a comment |
Thanks, I do like this solution also. +1
– Andez
Aug 15 '12 at 8:32
6
Mind that this won't work where the markup is<table> <thead><th>foo</th> ... </thead> <tbody> <tr>bar</tr> ... </tbody> </table>. If that's your markup use - much simpler -tbody tr:hoverselector.
– koniu
Mar 23 '15 at 8:39
3
This should be the marked answer.
– BritishSteel
Jan 25 '16 at 15:16
That is better answer. Thanks, it works for me very well.
– kevin
Dec 27 '17 at 6:08
Doesn't work if you use tables with<thead></thead>
– user2924019
May 16 '18 at 14:38
Thanks, I do like this solution also. +1
– Andez
Aug 15 '12 at 8:32
Thanks, I do like this solution also. +1
– Andez
Aug 15 '12 at 8:32
6
6
Mind that this won't work where the markup is
<table> <thead><th>foo</th> ... </thead> <tbody> <tr>bar</tr> ... </tbody> </table>. If that's your markup use - much simpler - tbody tr:hover selector.– koniu
Mar 23 '15 at 8:39
Mind that this won't work where the markup is
<table> <thead><th>foo</th> ... </thead> <tbody> <tr>bar</tr> ... </tbody> </table>. If that's your markup use - much simpler - tbody tr:hover selector.– koniu
Mar 23 '15 at 8:39
3
3
This should be the marked answer.
– BritishSteel
Jan 25 '16 at 15:16
This should be the marked answer.
– BritishSteel
Jan 25 '16 at 15:16
That is better answer. Thanks, it works for me very well.
– kevin
Dec 27 '17 at 6:08
That is better answer. Thanks, it works for me very well.
– kevin
Dec 27 '17 at 6:08
Doesn't work if you use tables with
<thead></thead>– user2924019
May 16 '18 at 14:38
Doesn't work if you use tables with
<thead></thead>– user2924019
May 16 '18 at 14:38
add a comment |
To expand on user2458978's answer surely the best way of doing this is to code up the tables correctly.
<table>
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
Then the CSS is simply
table tbody tr:hover { background-color: red; }
Here's a jsFiddle example
edited Oct 9 '17 at 5:46
Cœur
17.8k9106145
answered Aug 13 '13 at 13:17
MorvaelMorvael
1,87122040
How can I make it by using class name? I added class name -jsfiddle.net/bzamfir/2c2jU - but now the highlight is no longer working. Thanks for help
– bzamfir
Feb 28 '14 at 22:10
2
Sorry - might be too late now. The CSS in your Fiddle example is slightly off, .hover table tbody tr:hover { background-color: red; } should just be .hover tbody tr:hover { background-color: red; } as the table is not a child element of the element with the class .hover
– Morvael
Mar 11 '14 at 11:28
1
This should be the correct answer.
– swdon
Aug 25 '16 at 17:37
1
This is the correct way to have a table and thus this is the best answer.
– user2924019
May 16 '18 at 14:37
add a comment |
To expand on user2458978's answer surely the best way of doing this is to code up the tables correctly.
<table>
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
Then the CSS is simply
table tbody tr:hover { background-color: red; }
Here's a jsFiddle example
edited Oct 9 '17 at 5:46
Cœur
17.8k9106145
answered Aug 13 '13 at 13:17
MorvaelMorvael
1,87122040
How can I make it by using class name? I added class name -jsfiddle.net/bzamfir/2c2jU - but now the highlight is no longer working. Thanks for help
– bzamfir
Feb 28 '14 at 22:10
2
Sorry - might be too late now. The CSS in your Fiddle example is slightly off, .hover table tbody tr:hover { background-color: red; } should just be .hover tbody tr:hover { background-color: red; } as the table is not a child element of the element with the class .hover
– Morvael
Mar 11 '14 at 11:28
1
This should be the correct answer.
– swdon
Aug 25 '16 at 17:37
1
This is the correct way to have a table and thus this is the best answer.
– user2924019
May 16 '18 at 14:37
add a comment |
To expand on user2458978's answer surely the best way of doing this is to code up the tables correctly.
<table>
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
Then the CSS is simply
table tbody tr:hover { background-color: red; }
Here's a jsFiddle example
edited Oct 9 '17 at 5:46
Cœur
17.8k9106145
answered Aug 13 '13 at 13:17
MorvaelMorvael
1,87122040
To expand on user2458978's answer surely the best way of doing this is to code up the tables correctly.
<table>
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
Then the CSS is simply
table tbody tr:hover { background-color: red; }
Here's a jsFiddle example
edited Oct 9 '17 at 5:46
Cœur
17.8k9106145
answered Aug 13 '13 at 13:17
MorvaelMorvael
1,87122040
edited Oct 9 '17 at 5:46
Cœur
17.8k9106145
edited Oct 9 '17 at 5:46
Cœur
17.8k9106145
edited Oct 9 '17 at 5:46
Cœur
17.8k9106145
17.8k9106145
answered Aug 13 '13 at 13:17
MorvaelMorvael
1,87122040
answered Aug 13 '13 at 13:17
MorvaelMorvael
1,87122040
answered Aug 13 '13 at 13:17
MorvaelMorvael
1,87122040
1,87122040
How can I make it by using class name? I added class name -jsfiddle.net/bzamfir/2c2jU - but now the highlight is no longer working. Thanks for help
– bzamfir
Feb 28 '14 at 22:10
2
Sorry - might be too late now. The CSS in your Fiddle example is slightly off, .hover table tbody tr:hover { background-color: red; } should just be .hover tbody tr:hover { background-color: red; } as the table is not a child element of the element with the class .hover
– Morvael
Mar 11 '14 at 11:28
1
This should be the correct answer.
– swdon
Aug 25 '16 at 17:37
1
This is the correct way to have a table and thus this is the best answer.
– user2924019
May 16 '18 at 14:37
add a comment |
How can I make it by using class name? I added class name -jsfiddle.net/bzamfir/2c2jU - but now the highlight is no longer working. Thanks for help
– bzamfir
Feb 28 '14 at 22:10
2
Sorry - might be too late now. The CSS in your Fiddle example is slightly off, .hover table tbody tr:hover { background-color: red; } should just be .hover tbody tr:hover { background-color: red; } as the table is not a child element of the element with the class .hover
– Morvael
Mar 11 '14 at 11:28
1
This should be the correct answer.
– swdon
Aug 25 '16 at 17:37
1
This is the correct way to have a table and thus this is the best answer.
– user2924019
May 16 '18 at 14:37
How can I make it by using class name? I added class name -jsfiddle.net/bzamfir/2c2jU - but now the highlight is no longer working. Thanks for help
– bzamfir
Feb 28 '14 at 22:10
How can I make it by using class name? I added class name -jsfiddle.net/bzamfir/2c2jU - but now the highlight is no longer working. Thanks for help
– bzamfir
Feb 28 '14 at 22:10
2
2
Sorry - might be too late now. The CSS in your Fiddle example is slightly off, .hover table tbody tr:hover { background-color: red; } should just be .hover tbody tr:hover { background-color: red; } as the table is not a child element of the element with the class .hover
– Morvael
Mar 11 '14 at 11:28
Sorry - might be too late now. The CSS in your Fiddle example is slightly off, .hover table tbody tr:hover { background-color: red; } should just be .hover tbody tr:hover { background-color: red; } as the table is not a child element of the element with the class .hover
– Morvael
Mar 11 '14 at 11:28
1
1
This should be the correct answer.
– swdon
Aug 25 '16 at 17:37
This should be the correct answer.
– swdon
Aug 25 '16 at 17:37
1
1
This is the correct way to have a table and thus this is the best answer.
– user2924019
May 16 '18 at 14:37
This is the correct way to have a table and thus this is the best answer.
– user2924019
May 16 '18 at 14:37
add a comment |
1. Place header tr inside thead tag
2. Place other tr inside tbody tag
3. Use following css
table tr:not(thead):hover {
background-color: #B0E2FF;
}
edited May 29 '14 at 3:05
Robbie Averill
20.8k74076
answered Jun 6 '13 at 9:46
user2458978user2458978
22934
9
This did it for me:table tbody tr:hover { background-color: #B0E2FF; }
– egallardo
Aug 23 '13 at 3:33
:not(thead)is fine as jQuery selector but neither chromium nor firefox seem too impressed.table tbody tr:hoverworks just fine however - good comment.
– koniu
Mar 23 '15 at 8:31
add a comment |
1. Place header tr inside thead tag
2. Place other tr inside tbody tag
3. Use following css
table tr:not(thead):hover {
background-color: #B0E2FF;
}
edited May 29 '14 at 3:05
Robbie Averill
20.8k74076
answered Jun 6 '13 at 9:46
user2458978user2458978
22934
9
This did it for me:table tbody tr:hover { background-color: #B0E2FF; }
– egallardo
Aug 23 '13 at 3:33
:not(thead)is fine as jQuery selector but neither chromium nor firefox seem too impressed.table tbody tr:hoverworks just fine however - good comment.
– koniu
Mar 23 '15 at 8:31
add a comment |
1. Place header tr inside thead tag
2. Place other tr inside tbody tag
3. Use following css
table tr:not(thead):hover {
background-color: #B0E2FF;
}
edited May 29 '14 at 3:05
Robbie Averill
20.8k74076
answered Jun 6 '13 at 9:46
user2458978user2458978
22934
1. Place header tr inside thead tag
2. Place other tr inside tbody tag
3. Use following css
table tr:not(thead):hover {
background-color: #B0E2FF;
}
edited May 29 '14 at 3:05
Robbie Averill
20.8k74076
answered Jun 6 '13 at 9:46
user2458978user2458978
22934
edited May 29 '14 at 3:05
Robbie Averill
20.8k74076
edited May 29 '14 at 3:05
Robbie Averill
20.8k74076
edited May 29 '14 at 3:05
Robbie Averill
20.8k74076
20.8k74076
answered Jun 6 '13 at 9:46
user2458978user2458978
22934
answered Jun 6 '13 at 9:46
user2458978user2458978
22934
answered Jun 6 '13 at 9:46
user2458978user2458978
22934
22934
9
This did it for me:table tbody tr:hover { background-color: #B0E2FF; }
– egallardo
Aug 23 '13 at 3:33
:not(thead)is fine as jQuery selector but neither chromium nor firefox seem too impressed.table tbody tr:hoverworks just fine however - good comment.
– koniu
Mar 23 '15 at 8:31
add a comment |
9
This did it for me:table tbody tr:hover { background-color: #B0E2FF; }
– egallardo
Aug 23 '13 at 3:33
:not(thead)is fine as jQuery selector but neither chromium nor firefox seem too impressed.table tbody tr:hoverworks just fine however - good comment.
– koniu
Mar 23 '15 at 8:31
9
9
This did it for me:
table tbody tr:hover { background-color: #B0E2FF; }– egallardo
Aug 23 '13 at 3:33
This did it for me:
table tbody tr:hover { background-color: #B0E2FF; }– egallardo
Aug 23 '13 at 3:33
:not(thead) is fine as jQuery selector but neither chromium nor firefox seem too impressed. table tbody tr:hover works just fine however - good comment.– koniu
Mar 23 '15 at 8:31
:not(thead) is fine as jQuery selector but neither chromium nor firefox seem too impressed. table tbody tr:hover works just fine however - good comment.– koniu
Mar 23 '15 at 8:31
add a comment |
Use jQuery to add a class to the parent element of the td (wont select th)
$('td').hover(function(){
$(this).parent().addClass('highlight');
}, function() {
$(this).parent().removeClass('highlight');
});
Then add the CSS class
.highlight {
background:red;
}
answered Aug 9 '12 at 10:04
Oliver MillingtonOliver Millington
3,69541425
1
This is overkill, IMHO.
– Chris
Aug 9 '12 at 10:06
3
From the question it seems like he wants to learn a bit of jQuery that's why I'm using it, personally I wouldn't downvote an answer that would enhance someones knowledge even if you see it as overkill but hey whatever floats your boat.
– Oliver Millington
Aug 9 '12 at 10:09
I agree that it's good for learning more about jQuery.
– Chris
Aug 9 '12 at 10:14
I'm gonna +1 that thanks - more information. Wouldn't say overkill - a useful insight.
– Andez
Aug 9 '12 at 10:23
That would be very bad for people to copy paste this in their code. CSS is the proper way to go using:hoverand:first-child. Overkill;
– Alexis Paques
Jan 9 at 19:48
add a comment |
Use jQuery to add a class to the parent element of the td (wont select th)
$('td').hover(function(){
$(this).parent().addClass('highlight');
}, function() {
$(this).parent().removeClass('highlight');
});
Then add the CSS class
.highlight {
background:red;
}
answered Aug 9 '12 at 10:04
Oliver MillingtonOliver Millington
3,69541425
1
This is overkill, IMHO.
– Chris
Aug 9 '12 at 10:06
3
From the question it seems like he wants to learn a bit of jQuery that's why I'm using it, personally I wouldn't downvote an answer that would enhance someones knowledge even if you see it as overkill but hey whatever floats your boat.
– Oliver Millington
Aug 9 '12 at 10:09
I agree that it's good for learning more about jQuery.
– Chris
Aug 9 '12 at 10:14
I'm gonna +1 that thanks - more information. Wouldn't say overkill - a useful insight.
– Andez
Aug 9 '12 at 10:23
That would be very bad for people to copy paste this in their code. CSS is the proper way to go using:hoverand:first-child. Overkill;
– Alexis Paques
Jan 9 at 19:48
add a comment |
Use jQuery to add a class to the parent element of the td (wont select th)
$('td').hover(function(){
$(this).parent().addClass('highlight');
}, function() {
$(this).parent().removeClass('highlight');
});
Then add the CSS class
.highlight {
background:red;
}
answered Aug 9 '12 at 10:04
Oliver MillingtonOliver Millington
3,69541425
Use jQuery to add a class to the parent element of the td (wont select th)
$('td').hover(function(){
$(this).parent().addClass('highlight');
}, function() {
$(this).parent().removeClass('highlight');
});
Then add the CSS class
.highlight {
background:red;
}
answered Aug 9 '12 at 10:04
Oliver MillingtonOliver Millington
3,69541425
answered Aug 9 '12 at 10:04
Oliver MillingtonOliver Millington
3,69541425
answered Aug 9 '12 at 10:04
Oliver MillingtonOliver Millington
3,69541425
answered Aug 9 '12 at 10:04
Oliver MillingtonOliver Millington
3,69541425
3,69541425
1
This is overkill, IMHO.
– Chris
Aug 9 '12 at 10:06
3
From the question it seems like he wants to learn a bit of jQuery that's why I'm using it, personally I wouldn't downvote an answer that would enhance someones knowledge even if you see it as overkill but hey whatever floats your boat.
– Oliver Millington
Aug 9 '12 at 10:09
I agree that it's good for learning more about jQuery.
– Chris
Aug 9 '12 at 10:14
I'm gonna +1 that thanks - more information. Wouldn't say overkill - a useful insight.
– Andez
Aug 9 '12 at 10:23
That would be very bad for people to copy paste this in their code. CSS is the proper way to go using:hoverand:first-child. Overkill;
– Alexis Paques
Jan 9 at 19:48
add a comment |
1
This is overkill, IMHO.
– Chris
Aug 9 '12 at 10:06
3
From the question it seems like he wants to learn a bit of jQuery that's why I'm using it, personally I wouldn't downvote an answer that would enhance someones knowledge even if you see it as overkill but hey whatever floats your boat.
– Oliver Millington
Aug 9 '12 at 10:09
I agree that it's good for learning more about jQuery.
– Chris
Aug 9 '12 at 10:14
I'm gonna +1 that thanks - more information. Wouldn't say overkill - a useful insight.
– Andez
Aug 9 '12 at 10:23
That would be very bad for people to copy paste this in their code. CSS is the proper way to go using:hoverand:first-child. Overkill;
– Alexis Paques
Jan 9 at 19:48
1
1
This is overkill, IMHO.
– Chris
Aug 9 '12 at 10:06
This is overkill, IMHO.
– Chris
Aug 9 '12 at 10:06
3
3
From the question it seems like he wants to learn a bit of jQuery that's why I'm using it, personally I wouldn't downvote an answer that would enhance someones knowledge even if you see it as overkill but hey whatever floats your boat.
– Oliver Millington
Aug 9 '12 at 10:09
From the question it seems like he wants to learn a bit of jQuery that's why I'm using it, personally I wouldn't downvote an answer that would enhance someones knowledge even if you see it as overkill but hey whatever floats your boat.
– Oliver Millington
Aug 9 '12 at 10:09
I agree that it's good for learning more about jQuery.
– Chris
Aug 9 '12 at 10:14
I agree that it's good for learning more about jQuery.
– Chris
Aug 9 '12 at 10:14
I'm gonna +1 that thanks - more information. Wouldn't say overkill - a useful insight.
– Andez
Aug 9 '12 at 10:23
I'm gonna +1 that thanks - more information. Wouldn't say overkill - a useful insight.
– Andez
Aug 9 '12 at 10:23
That would be very bad for people to copy paste this in their code. CSS is the proper way to go using
:hover and :first-child. Overkill;– Alexis Paques
Jan 9 at 19:48
That would be very bad for people to copy paste this in their code. CSS is the proper way to go using
:hover and :first-child. Overkill;– Alexis Paques
Jan 9 at 19:48
add a comment |
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.
answered Nov 22 '18 at 23:57
Lars TuffLars Tuff
293
This would highlight the single cells, while I think it would be better to highlight the entire row while hovering over any cell of it.
– umbe1987
Dec 5 '18 at 16:53
add a comment |
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.
answered Nov 22 '18 at 23:57
Lars TuffLars Tuff
293
This would highlight the single cells, while I think it would be better to highlight the entire row while hovering over any cell of it.
– umbe1987
Dec 5 '18 at 16:53
add a comment |
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.
answered Nov 22 '18 at 23:57
Lars TuffLars Tuff
293
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.
answered Nov 22 '18 at 23:57
Lars TuffLars Tuff
293
answered Nov 22 '18 at 23:57
Lars TuffLars Tuff
293
answered Nov 22 '18 at 23:57
Lars TuffLars Tuff
293
answered Nov 22 '18 at 23:57
Lars TuffLars Tuff
293
293
This would highlight the single cells, while I think it would be better to highlight the entire row while hovering over any cell of it.
– umbe1987
Dec 5 '18 at 16:53
add a comment |
This would highlight the single cells, while I think it would be better to highlight the entire row while hovering over any cell of it.
– umbe1987
Dec 5 '18 at 16:53
This would highlight the single cells, while I think it would be better to highlight the entire row while hovering over any cell of it.
– umbe1987
Dec 5 '18 at 16:53
This would highlight the single cells, while I think it would be better to highlight the entire row while hovering over any cell of it.
– umbe1987
Dec 5 '18 at 16:53
add a comment |
Why not something like:
tr:first-child ~ tr { background-color:#fff; }
answered Jan 8 '14 at 18:10
user3174546user3174546
1
add a comment |
Why not something like:
tr:first-child ~ tr { background-color:#fff; }
answered Jan 8 '14 at 18:10
user3174546user3174546
1
add a comment |
Why not something like:
tr:first-child ~ tr { background-color:#fff; }
answered Jan 8 '14 at 18:10
user3174546user3174546
1
Why not something like:
tr:first-child ~ tr { background-color:#fff; }
answered Jan 8 '14 at 18:10
user3174546user3174546
1
answered Jan 8 '14 at 18:10
user3174546user3174546
1
answered Jan 8 '14 at 18:10
user3174546user3174546
1
answered Jan 8 '14 at 18:10
user3174546user3174546
1
1
add a comment |
add a comment |
As of my requirement, I have to highlight all the even rows except header row.
Hence, this answer might not be suitable to the above question.
Even then, I am giving my answer here with the hope that somebody else can use my answer if they encounter this page in search engine search.
My answer is:
$("#tableName tr:even").not("tr:nth(0)").addClass("highlight");
answered Dec 31 '14 at 9:20
Ashok kumarAshok kumar
75221543
add a comment |
As of my requirement, I have to highlight all the even rows except header row.
Hence, this answer might not be suitable to the above question.
Even then, I am giving my answer here with the hope that somebody else can use my answer if they encounter this page in search engine search.
My answer is:
$("#tableName tr:even").not("tr:nth(0)").addClass("highlight");
answered Dec 31 '14 at 9:20
Ashok kumarAshok kumar
75221543
add a comment |
As of my requirement, I have to highlight all the even rows except header row.
Hence, this answer might not be suitable to the above question.
Even then, I am giving my answer here with the hope that somebody else can use my answer if they encounter this page in search engine search.
My answer is:
$("#tableName tr:even").not("tr:nth(0)").addClass("highlight");
answered Dec 31 '14 at 9:20
Ashok kumarAshok kumar
75221543
As of my requirement, I have to highlight all the even rows except header row.
Hence, this answer might not be suitable to the above question.
Even then, I am giving my answer here with the hope that somebody else can use my answer if they encounter this page in search engine search.
My answer is:
$("#tableName tr:even").not("tr:nth(0)").addClass("highlight");
answered Dec 31 '14 at 9:20
Ashok kumarAshok kumar
75221543
answered Dec 31 '14 at 9:20
Ashok kumarAshok kumar
75221543
answered Dec 31 '14 at 9:20
Ashok kumarAshok kumar
75221543
answered Dec 31 '14 at 9:20
Ashok kumarAshok kumar
75221543
75221543
add a comment |
add a comment |
Use TH tag for first row and do that:
th {
background-color:#fff;
}
For all others rows:
tr:not(:first-child):hover {
background-color:#eee;
}
or
tr:hover td {
background-color:#eee;
}
answered Apr 30 '13 at 19:45
phsairesphsaires
1,2241011
add a comment |
Use TH tag for first row and do that:
th {
background-color:#fff;
}
For all others rows:
tr:not(:first-child):hover {
background-color:#eee;
}
or
tr:hover td {
background-color:#eee;
}
answered Apr 30 '13 at 19:45
phsairesphsaires
1,2241011
add a comment |
Use TH tag for first row and do that:
th {
background-color:#fff;
}
For all others rows:
tr:not(:first-child):hover {
background-color:#eee;
}
or
tr:hover td {
background-color:#eee;
}
answered Apr 30 '13 at 19:45
phsairesphsaires
1,2241011
Use TH tag for first row and do that:
th {
background-color:#fff;
}
For all others rows:
tr:not(:first-child):hover {
background-color:#eee;
}
or
tr:hover td {
background-color:#eee;
}
answered Apr 30 '13 at 19:45
phsairesphsaires
1,2241011
edited Aug 25 '17 at 12:02
answered Apr 30 '13 at 19:45
phsairesphsaires
1,2241011
answered Apr 30 '13 at 19:45
phsairesphsaires
1,2241011
answered Apr 30 '13 at 19:45
phsairesphsaires
1,2241011
1,2241011
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f11880892%2fhtml-table-highlight-row-on-hover-except-first-row-header%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
