我早些时候问了一个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的白色边框厚度,但最终在角落处出现奇怪的连接,在四肢处出现不对称的边界.

解决方法:

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

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

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