更改表上的边框而不会导致表调整大小

Question

我之前问了一个question关于使用JavaScript和`CSS突出显示表格的方法。我很难确保表格的边框看起来不错。

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

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

我的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的白色边框厚度，但我最终会在角落处出现奇怪的连接，并在四肢处出现不对称的边界。

Answer 1

如果大纲不适合你，在默认状态下使用2px实心透明边框也可以起作用：

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

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

Answer 2

您是否可以使用看起来像边框的透明png在悬停时覆盖表格单元格？

Answer 3

将DIV放入TD并改为设置DIV样式。您可以操纵DIV的大小以允许边框，而不能用于表格单元格。

Answer 4

如果你没有边框并添加边框，事情会搞砸。相反，如果你有边框而更改它的颜色，结果会好得多。至少可以说没有跳跃。如果您的JSFiddle示例代表您真正想要做的事情（那是坚实的bg-color td），那就是我要做的。

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

参见完整示例：http://jsfiddle.net/grNr8/9/

Answer 5

在我看来，最简单的方法是始终使用边框并仅更改颜色。解决方案非常简单，我想我错过了一些问题的细节：

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