[Solved] Table Row Hover with Rowspan

[thomasoffinga]

Hi, I’m trying to get this little piece of code to work, but I can’t get the entire row to change background when one of the two rows gets hovered. Here’s the code:

<br />
<table><br />
<tr><br />
<td rowspan="2">Spanning both rows</td><br />
<td>Top Row</td><br />
</tr><br />
<tr><br />
<td>Bottom Row</td><br />
</tr><br />
</table>

and for styling

table tr:hover td{background:blue;}

In this example, the two rows only turn blue one at a time. Is it possible to affect them all at once?

Thanks.

[thomasoffinga]

Ehhr.. how do I display HTML properly on here?

[Rob MacKay]

if you press ctrl C you will get the code rap tags :) or the blueish button next to the italic on the WYSIWYG editor bar

[Bob]

@Robskiwarrior: that shortcut has been removed, as is the wysiwyg editor.

@Thomasoffinga: to display code, wrap the following tags around it:

  and of course  

< /code>

Remove the space before the last backward slash though :)

[Rob MacKay]

@bob oddly it still works for me, both button and short-cut lol – might be a permissions thing though

[thomasoffinga]

Ah, there we go. Thanks guys.

[Bob]

@Robskiwarrior: Really? Thats amazing. Do you also have the permission to give back the WYSIWYG editor to me? :)

As for your problem, thomasoffinga, I tried it but I didn’t seem to solve it. Added a class to both table rows but then still only one row would color blue. Is it possible to use divs for this, or would that make it more complicated for you?

[Rob MacKay]

@Bob – possibly lol

We are actually looking into alternatives anyway :)

[thomasoffinga]

Hmm.. I’m afraid it won’t be possible to use DIVs, since it’s a pretty big table and we need to use things like sorting. (It’s a backend management system)

[Eclipse]

@thomas

Can you be a little more specific in what you are trying to accomplish?

Using :hover maybe doesn’t cut it, since you can only hover one element at a time.
Or table:hover ?? That will highlight it all when hovering

[Eclipse]

Perhaps you can use jQuery/javascript to accomplish the task

[Chris Coyier]

This is pretty trashy, but it’s my first idea. I’ll see if I can think of others.

http://jsbin.com/uhaja4/2

[LPietroni]

Hello everyone,

I know it’s an old post, but i’m a beginner and i’ve encountered the same issue with rowspan and hovering.

Nevertheless, I’ve used more than one tbody in my table.
I place my rowspan into a separate tbody with a specific class. Then apply the hover effect to this class.

Ex:

Row 1, Cell 1
Row 1, Cell 2


Row 2, Cell 1
Row 2, Cell 2





row 1, Cell 1
Row 1 and 2, Cell 2


row2, Cell 2

And the CSS :

tr:hover {

background: #eee;

}



tbody.row-wrapper:hover {

background: #eee;

}

Hope that can help.
However, doing some sorting on this table won’t be easy. But i know nothing about javascript.

ps : please forgive my english

LP

[cdtapay]

I know this is old. But I took Chris Coyier idea and wrote this:

$(function() {

$("tbody td").hover(function() {

$el = $(this);

if ($el.parent().has('td[rowspan]').length == 0)

$el.parent().prevAll('tr:has(td[rowspan]):first').find('td[rowspan]').addClass("hover");

}, function() {

$el.parent().prevAll('tr:has(td[rowspan]):first').find('td[rowspan]').removeClass("hover");

});



});

You can see it working here => http://supera-v2.breathwebdesign.com/coachingpersonal#comprar

[Chris Coyier]

Sweet.

I made a reduced demo in case this comes up again: http://codepen.io/chriscoyier/pen/wLGDz

[Author]

Posts