Forums

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:


<table>
 <tr>
  <td rowspan="2">Spanning both rows</td>
  <td>Top Row</td>
 </tr>
 <tr>
  <td>Bottom Row</td>
 </tr>
</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?

Robskiwarrior

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:
<pre><code> and of course </pre> < /code>

Remove the space before the last backward slash though :)

Robskiwarrior

@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?

Robskiwarrior

@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

chriscoyier

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:


<table border="1">
<tbody>
	 <tr>
	 	 <td>Row 1, Cell 1</td>
	 	 <td>Row 1, Cell 2</td>
	 </tr>
	 <tr>
	 	 <td>Row 2, Cell 1</td>
	 	 <td>Row 2, Cell 2</td>
	 </tr>
</tbody>

<tbody class="row-wrapper">
	  <tr>
		<td>row 1, Cell 1</td>
		<td rowspan="2">Row 1 and 2, Cell 2</td>
	 </tr>
	 <tr>
		<td>row2, Cell 2</td>
	 </tr>
</tbody>
</table>

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

chriscoyier

Sweet.

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

treehouse : what would you like to learn today?

Forums

Table Row Hover with Rowspan