I am using the basic code idea from http://css-tricks.com/row-and-column-highlighting/ (currently unavailable). Full code below.

XHTML

<table>

<colgroup></colgroup>

<colgroup></colgroup>

<colgroup></colgroup>

<colgroup></colgroup>

<colgroup></colgroup>

<thead>

<tr>

<th></th>

<th></th>

<th></th>

<th></th>

<th></th>

</tr>

</thead>

<tbody>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

</tbody>

</table>

CSS

.hover { background-color: #eee; }

jQuery

$("table").delegate('td','mouseover mouseleave', function(e) {

if (e.type == 'mouseover') {

$(this).parent().addClass("hover");

$("colgroup").eq($(this).index()).addClass("hover");

}

else {

$(this).parent().removeClass("hover");

$("colgroup").eq($(this).index()).removeClass("hover");

}

});

I added a new column with rowspan and noticed the above jQuery code is off by index 1 when NOT hovering over the cell which begins the rowspan. My guess is that because of the rowspan jQuery doesnt count the cellspace there as used unless its the cell that contains the rowspan attribute.

The issue does not appear when using colspan.