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.

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.

Answer 1

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/

Answer 2

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