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
Andez
2,451145387
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
Andez
2,451145387
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
Andez
2,451145387
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
Andez
2,451145387
asked Aug 9 '12 at 9:58
Andez
2,451145387
asked Aug 9 '12 at 9:58
Andez
2,451145387
asked Aug 9 '12 at 9:58
Andez
2,451145387
asked Aug 9 '12 at 9:58
Andez
2,451145387
2,451145387
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
Chris
22.7k44567
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
Chris
22.7k44567
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 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.4k9102143
answered Aug 13 '13 at 13:17
Morvael
1,83621940
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 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.6k73976
answered Jun 6 '13 at 9:46
user2458978
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 Millington
3,68741425
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
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 at 23:57
Lars 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 at 16:53
add a comment |
Why not something like:
tr:first-child ~ tr { background-color:#fff; }
answered Jan 8 '14 at 18:10
user3174546
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 kumar
74721442
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
phsaires
1,2041011
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
Chris
22.7k44567
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
Chris
22.7k44567
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
Chris
22.7k44567
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
Chris
22.7k44567
edited Aug 9 '12 at 12:05
answered Aug 9 '12 at 10:03
Chris
22.7k44567
answered Aug 9 '12 at 10:03
Chris
22.7k44567
answered Aug 9 '12 at 10:03
Chris
22.7k44567
22.7k44567
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
Chris
22.7k44567
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 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
Chris
22.7k44567
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 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
Chris
22.7k44567
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
Chris
22.7k44567
answered Aug 10 '12 at 13:06
Chris
22.7k44567
answered Aug 10 '12 at 13:06
Chris
22.7k44567
answered Aug 10 '12 at 13:06
Chris
22.7k44567
22.7k44567
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 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 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 at 14:38
Doesn't work if you use tables with
<thead></thead>– user2924019
May 16 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.4k9102143
answered Aug 13 '13 at 13:17
Morvael
1,83621940
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 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.4k9102143
answered Aug 13 '13 at 13:17
Morvael
1,83621940
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 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.4k9102143
answered Aug 13 '13 at 13:17
Morvael
1,83621940
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.4k9102143
answered Aug 13 '13 at 13:17
Morvael
1,83621940
edited Oct 9 '17 at 5:46
Cœur
17.4k9102143
edited Oct 9 '17 at 5:46
Cœur
17.4k9102143
edited Oct 9 '17 at 5:46
Cœur
17.4k9102143
17.4k9102143
answered Aug 13 '13 at 13:17
Morvael
1,83621940
answered Aug 13 '13 at 13:17
Morvael
1,83621940
answered Aug 13 '13 at 13:17
Morvael
1,83621940
1,83621940
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 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 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 at 14:37
This is the correct way to have a table and thus this is the best answer.
– user2924019
May 16 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.6k73976
answered Jun 6 '13 at 9:46
user2458978
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.6k73976
answered Jun 6 '13 at 9:46
user2458978
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.6k73976
answered Jun 6 '13 at 9:46
user2458978
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.6k73976
answered Jun 6 '13 at 9:46
user2458978
22934
edited May 29 '14 at 3:05
Robbie Averill
20.6k73976
edited May 29 '14 at 3:05
Robbie Averill
20.6k73976
edited May 29 '14 at 3:05
Robbie Averill
20.6k73976
20.6k73976
answered Jun 6 '13 at 9:46
user2458978
22934
answered Jun 6 '13 at 9:46
user2458978
22934
answered Jun 6 '13 at 9:46
user2458978
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 Millington
3,68741425
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
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 Millington
3,68741425
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
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 Millington
3,68741425
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 Millington
3,68741425
answered Aug 9 '12 at 10:04
Oliver Millington
3,68741425
answered Aug 9 '12 at 10:04
Oliver Millington
3,68741425
answered Aug 9 '12 at 10:04
Oliver Millington
3,68741425
3,68741425
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
add a comment |
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
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
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 at 23:57
Lars 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 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 at 23:57
Lars 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 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 at 23:57
Lars 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 at 23:57
Lars Tuff
293
answered Nov 22 at 23:57
Lars Tuff
293
answered Nov 22 at 23:57
Lars Tuff
293
answered Nov 22 at 23:57
Lars 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 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 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 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 at 16:53
add a comment |
Why not something like:
tr:first-child ~ tr { background-color:#fff; }
answered Jan 8 '14 at 18:10
user3174546
1
add a comment |
Why not something like:
tr:first-child ~ tr { background-color:#fff; }
answered Jan 8 '14 at 18:10
user3174546
1
add a comment |
Why not something like:
tr:first-child ~ tr { background-color:#fff; }
answered Jan 8 '14 at 18:10
user3174546
1
Why not something like:
tr:first-child ~ tr { background-color:#fff; }
answered Jan 8 '14 at 18:10
user3174546
1
answered Jan 8 '14 at 18:10
user3174546
1
answered Jan 8 '14 at 18:10
user3174546
1
answered Jan 8 '14 at 18:10
user3174546
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 kumar
74721442
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 kumar
74721442
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 kumar
74721442
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 kumar
74721442
answered Dec 31 '14 at 9:20
Ashok kumar
74721442
answered Dec 31 '14 at 9:20
Ashok kumar
74721442
answered Dec 31 '14 at 9:20
Ashok kumar
74721442
74721442
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
phsaires
1,2041011
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
phsaires
1,2041011
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
phsaires
1,2041011
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
phsaires
1,2041011
edited Aug 25 '17 at 12:02
answered Apr 30 '13 at 19:45
phsaires
1,2041011
answered Apr 30 '13 at 19:45
phsaires
1,2041011
answered Apr 30 '13 at 19:45
phsaires
1,2041011
1,2041011
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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
