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.

enter image description here

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

enter image description here

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.

that the left border disappears is because of the border-collapse property. it is by default set to collapse. — Sven Bieder, Nov 21 '12 at 15:47
adding `$('tr:last-child td').removeClass('highlighted');` after you add the .highlighted class will "ignore the lowest row" — Andy, Nov 21 '12 at 15:48
@Andy for some reason this only removes the style on the left hand side. Does `$('tr:last-child td')` reference the lowest cell in the selected column? I was experimenting setting it a different color and it did not behave as I thought it would. — djq, Nov 21 '12 at 16:05
It references all of the cells (td) in the last row (tr) and then removes the class. If you changed the colour it would affect all cells in that row, but because only the column your hovering on should have the class (.highlighted) you will only see the difference on that cell — Andy, Nov 21 '12 at 16:22
I understand now how `$('tr:last-child td')` references the row, but I can't understand how `highlighted` can be used. `$('tr:last-child td highlighted')` (or various permutations) do not seem to make a difference. — djq, Nov 21 '12 at 18:48

score 7 · Accepted Answer · answered Nov 21 '12 at 15:47

7

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.

answered Nov 21 '12 at 15:47

Epsil0neR

1,676
16
24

Thanks for the suggestion. I am trying to have no horizontal bars when selected so it is just one large rectangle like I drew in my question. Is it possible to prevent these from changing color too? – djq Nov 21 '12 at 15:53
Just realized that I only need to use `border-left` and `border-right` instead. – djq Nov 21 '12 at 15:56
@celenius, [jsFiddle](http://jsfiddle.net/nsKHw/9/) now it only color horizontal and up and down as in your image example what you want. – Epsil0neR Nov 21 '12 at 16:01
Regarding highlightedPrev: Border colours which conflict with all things being equal apply the leftmost or topmost cell border - http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution. – Curtis Yallop May 15 '15 at 01:40

score 1 · Answer 2 · answered Nov 21 '12 at 15:48

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 ;)

Robert Koritnik · Answer 3 · 2012-11-21T16:02:18.140

1

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.

edited Nov 21 '12 at 16:02

answered Nov 21 '12 at 15:49

Robert Koritnik

103,639
52
277
404

score 0 · Answer 4 · answered Nov 21 '12 at 15:49

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;
}

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

4 Answers4

Table border collapsing

Linked