Changing the border on table without causing a table to resize

Question

I asked a question earlier about a way of highlighting tables using JavaScript and `CSS. I'm having difficulty ensuring that the borders of the table look ok.

For example, in my table border I have set the margin to be 0. When hovering on a column, the increased border size causes the overall table to "jump" slightly. To prevent this I tried to resize the table cells but this does not make a difference.

enter image description here

I'm illustrating the problem with a JSFiddle here: http://jsfiddle.net/grNr8/6/. It's a little hard to see in these images but hopefully the fiddle illustrates the issue.

My CSS is the following:

table, td {
    background-color: white;   
    border: 0px solid white;
    border-collapse: collapse;   
}

When highlighting the column, a border of pixel thickness 2 is chosen. I tried experimenting with changing the cell size using $('td').css({height: '29px'}); (and varying from 26 - 29) but it does not change the effect. The Javascript I am using to highlight is based mainly on an answer to my previous question:

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

    $('td').css({
        height: '39px'
    });

    if (t > 1) {
        var t1 = t - 1;
        $('td:nth-child(' + t1 + ')').addClass('highlightedPrev');
        $('td:nth-child(' + t1 + ')').last().removeClass('highlightedPrev');

    }
}, function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').removeClass('highlighted ');
    $('td:nth-child(' + t + ')').first().removeClass('highlightedTop');
    $('td:nth-child(' + t + ')').last().removeClass('highlightedBottom');
    $('td:nth-child(' + t + ')').last().removeClass('x');
    if (t > 1) {
        var t1 = t - 1;
        $('td:nth-child(' + t1 + ')').removeClass('highlightedPrev');
    }
});

Is it possible to resize the cells for smoother viewing, or should I be using a different approach? I have experimented with using a white border thickness of 1px but I end up with strange joins at the corners and un-symmetric borders at the extremities.

Is using `outline` an option? The down side is that all 4 sides must have a stroke applied to them, but the up side is that it doesn't impact the element's width like border does. — cimmanon, Nov 21 '12 at 21:36
Yes - it could be (I was not aware of it). Can it be used with a table? — djq, Nov 21 '12 at 21:37

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

4

If outline doesn't work for you, using a 2px solid transparent border on the default state can also work:

table, td {
    background-color: white;   
    border: 2px solid transparent;
    border-collapse: collapse;   
}

http://jsfiddle.net/grNr8/7/

answered Nov 21 '12 at 21:47

cimmanon

67,211
17
165
171

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

1

Could you overlay the table cell on hover with a transparent png that looks like a border?

answered Nov 21 '12 at 21:37

Sico

1,183
1
10
16

score 1 · Answer 3 · answered Nov 21 '12 at 21:38

1

Put a DIV in the TD and style the DIV instead. You can manipulate the size of the DIV to allow for the border, whereas you cannot for a table cell.

answered Nov 21 '12 at 21:38

Diodeus - James MacFarlane

112,730
33
157
176

ok - I will try this out. I also just thought that it might be simpler to overlay a set of divs matching in size with the columns which I could style. – djq Nov 21 '12 at 21:44

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

If you don't have a border and add a border, things get messed up. Instead if you do have a border and change it's colour, the outcome is much better. No jumping, to say the least. If your JSFiddle example represents what you really want to do (that being solid bg-coloured td's), that's what I would do.

.a{background-color: red; border: 2px solid red; }
.b{background-color: green; border: 2px solid green;}
.c{background-color: orange; border: 2px solid orange;}

See full example: http://jsfiddle.net/grNr8/9/

score 0 · Answer 5 · answered Nov 21 '12 at 22:00

In my opinion, it is easiest to just always use a border and only change the color. The solution is so simple that I think I missed some details of the question:

fiddle

.a{
    background-color: red;
    border: 2px solid red;
}
.b{
    background-color: green;
    border: 2px solid green;
}
.c{
    background-color: orange;
    border: 2px solid orange;
}

Changing the border on table without causing a table to resize

5 Answers5