How can a html table highlight columns by changing the border on hover?

Question

I'm exploring how to style a table in such a way that the border can be changed when the mouse hovers over a column.

When the mouse is over a column, I want to highlight that column by changing the border color:

To highlight, I am using the following JavaScript code with the jQuery library:

$('td').hover(function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').addClass('highlighted');
},
function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').removeClass('highlighted');
});

with the following CSS:

.highlighted {
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-left: 2px solid black;
}

You can view how this works in this JSFiddle: http://jsfiddle.net/sCFjj/1/ This is only working when I hover on the left-most column. Otherwise it highlights the right-column (and top) but not the left vertical column. Is there a way of making the left-vertical column appear?

Ideally, I would like the effect to ignore the lowest row, but I am not sure how to exclude a row from the jQuery selection.

I've based my attempt closely on this previous question .

Answer 1

Link: jsFiddle . Also add to previous collumn border-right and you will get that you want. I think that collumn's right border is over next collumn left border.

JavaScript:

$('td').hover(function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').addClass('highlighted');

    if(t>1){
        var t1 = t -1;
        //alert("T:" + t + "<br/> T1:" + t1);
        $('td:nth-child(' + t1 + ')').addClass('highlightedPrev');
    }
},
function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').removeClass('highlighted ');
        if(t>1){
         var t1 = t -1;
         $('td:nth-child(' + t1 + ')').removeClass('highlightedPrev');
    }
});​

CSS:

.highlighted {
    border: 2px solid black;
}
.highlightedPrev {
    border-right: 2px solid black;
}

Hope I solved your problem.

Answer 2

It seems every row is on top of his "right neighbor", so they're overlapping each other. You can research deeper why is that, or just fix it with:

$('td').hover(function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').addClass('highlighted');
    $('td:nth-child(' + (t-1) + ')').addClass('highlighted_only_right');
},
function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').removeClass('highlighted');
    $('td:nth-child(' + (t-1) + ')').removeClass('highlighted_only_right');
});

Tell us if you find something better ;)

Answer 3

Table border collapsing

The problem you're facing is that tables by default collapse borders. So you have to set an additional style on table itself:

border-collapse: separate;

This also means that your borders will need to have 1 pixel borders because sibling borders will add to 2 pixels.

Additional styling can then make it possible to remove inner ones and just highlight outers.

Answer 4

Try this: http://jsfiddle.net/sCFjj/27/

I added a highlighted_left, and simplified the javascript a bit (removing the highlight class for all cells)

$('td').hover(function() {
    var t = parseInt($(this).index());
    $('tr td').removeClass('highlighted');
    $('tr td').removeClass('highlighted_left');
    $('tr td:nth-child(' + (t+1) + ')').addClass('highlighted');
    $('tr td:nth-child(' + (t) + ')').addClass('highlighted_left');
});​

Where highlighted_left is:

.highlighted_left{
    border-right: 2px solid black;
}