How to deal with `rowspan` and background colors within a table?

Question

I have a generic HTML table with some CSS background color styling. When a user hovers over a row, the background color of all cells in that row is changed to a light gray.

I have a cell in my top row that spans three rows. When I hover over the top row, the cell is shaded appropriately. However, when hovering over the second and third rows, the cell is not shaded.

Is it possible to shade the cell within the 2nd or 3rd row? How would I do that?

Relevant code:

style.css

td {
    border: black 1px solid;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

tr:hover td {
    background-color: #DDD;
}

th {
    border: none;
}

table.html

<tr>
    <td>Row 1:Col 1</td>
    <td>Row 1:Col 2</td>
    <td rowspan="3">Row 1/2/3:Col3</td>
</tr>
<tr>
    <td>Row 2:Col 1</td>
    <td>Row 2:Col 2</td>
</tr>
<tr>
    <td>Row 3:Col 1</td>
    <td>Row 3:Col 2</td>
</tr>

Answer 1

It can be accomplished using JavaScript like so:

<style type="text/css">
td {
    border: black 1px solid;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px
}

tr:hover td {
    background-color: #DDDDDD;
}

th {
    border: none;
}

</style>
<script type="text/javascript">

function shadeCell( cellName )
{
    document.getElementById(cellName).style.backgroundColor = '#DDDDDD';
}

function unShadeCell( cellName )
{
    document.getElementById(cellName).style.backgroundColor = '';
}

</script>
<table>
<tr onMouseOver="shadeCell('bigCell')" onMouseOut="unShadeCell('bigCell')">
    <td>Row 1:Col 1</td>
    <td>Row 1:Col 2</td>
    <td rowspan="3" id="bigCell">Row 1/2/3:Col3</td>
</tr>
<tr onMouseOver="shadeCell('bigCell')" onMouseOut="unShadeCell('bigCell')">
    <td>Row 2:Col 1</td>
    <td>Row 2:Col 2</td>
</tr>
<tr onMouseOver="shadeCell('bigCell')" onMouseOut="unShadeCell('bigCell')">
    <td>Row 3:Col 1</td>
    <td>Row 3:Col 2</td>
</tr>
</table>

I am not sure how one can accomplish what you want by just plain HTML / CSS. Btw, you can simplify the above JavaScript using jQuery - would save you some typing.

Best, Kamran

Answer 2

Which browsers are tested? Does the example work if you remove the rowspan=3 TD? (If it does, this is quite a bug/feature.)

Another way of doing this is using script to alter the classname on TR.

td { background-color: #fff; }
.hover td { background-color: #ddd; }

Might actually be necessary in this case.

Answer 3

I took thesocialgeek's answer as confirmation that there's no CSS-only implementation and that this is the best approach in JS.

But I've implemented it in the more generic way so the code could go into the central JS script for my whole site. It should solve the problem for any table cell with rowspan defined.

This is my CSS:

tr.hover,
th.hover,
td.hover,
tr.hoverable:hover {
    background-color: grey;
}

An ordinary table row will be hovered by CSS' :hover pseudo-class. Any row as well as <th>s and <td>s will be hovered by force when the .hover class is added. That alone work's perfect for simple tables.

This is the JS code as a generic solution to complex tables:

$(document).ready(function() {
    // find all <th>/<td> with rowspan in hoverable <tr>
    $('tr.hoverable [rowspan]').each(function(index, cell) {
        var $cell = $(cell);
        var rowspan = $cell.attr('rowspan');
        var limit = rowspan - 1; // :lt() is zero-based

        var $this_row  = $cell.closest('tr');
        var $next_rows = $this_row.nextAll('tr:lt(' + limit + ')');

        $next_rows.hover(
            function() {$cell.   addClass('hover')},
            function() {$cell.removeClass('hover')}
        );
    });
});

It adds event listeners for mouseenter and mouseleave to the rows following a row with the rowspan attribute set. The whole trick is to collect the right elements and then simply the CSS class needs to be toggled.

Problem still to be solved: On my page the event listeners are called three times each. I don't know exactly why. It's a bit useless but the code is not as fat as I could not ignore that.

I tested the code only in Firefox 22 with jQuery 2.0.3 where the result is perfectly like intended.

Update: I found it useful and extended the code to highlight all rows related to the rowspan cell when this cell is hovered. Add the following snippet to the long function above:

        $cell.hover(
            function() {$next_rows.   addClass('hover')},
            function() {$next_rows.removeClass('hover')}
        );