The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript [Solved] Table Row Hover with Rowspan

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
  • #30647

    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 />

    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?



    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


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

    : 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


    Ah, there we go. Thanks guys.


    @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 :)


    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)



    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


    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.


    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.


    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



    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)
    }, function() {


    You can see it working here =>

    Chris Coyier


    I made a reduced demo in case this comes up again:

Viewing 15 posts - 1 through 15 (of 19 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.