javascript - 在不调整表格大小的情况下更改表格的边框

Question

我问了一个question早些时候关于使用 JavaScript 和 `CSS 突出显示表格的方法。我很难确保表格的边框看起来正常。

例如，在我的表格边框中，我将边距设置为 0。将鼠标悬停在列上时，增加的边框大小会导致整个表格略微“跳跃”。为了防止这种情况，我尝试调整表格单元格的大小，但这并没有什么不同。

我在这里用 JSFiddle 来说明问题:http://jsfiddle.net/grNr8/6/ .在这些图像中有点难以看到，但希望 fiddle 能说明问题。

我的 CSS 如下:

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

突出显示列时，选择像素粗细为 2 的边框。我尝试使用 $('td').css({height: '29px'}); 尝试更改单元格大小(并且从 26 - 29 变化)但是它不会改变效果。我用来突出显示的 Javascript 主要基于对我上一个问题的回答:

$('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');
    }
});​

是否可以调整单元格的大小以使查看更流畅，还是我应该使用不同的方法？我尝试过使用厚度为 1px 的白色边框，但我最终在拐 Angular 处出现了奇怪的连接，在四肢出现了不对称的边框。

Answer 1

如果轮廓不适合你，在默认状态下使用 2px 实心透明边框也可以:

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

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