3

我之前问过一个问题，关于使用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但最终在角落处出现奇怪的连接，在四肢处出现不对称边框。

4

5 回答 5

4

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

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

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

于 2012-11-21T21:47:56.703 回答
1

你能用一个看起来像边框的透明png覆盖悬停时的表格单元格吗？

于 2012-11-21T21:37:56.860 回答
1

在 TD 中放置一个 DIV 并设置 DIV 的样式。您可以操纵 DIV 的大小以允许边框，而不能用于表格单元格。

于 2012-11-21T21:38:26.570 回答
0

如果你没有边框并添加边框，事情就会变得一团糟。相反，如果你确实有一个边框并改变它的颜色，结果会好得多。至少可以说，没有跳跃。如果您的 JSFiddle 示例代表了您真正想要做的事情（即纯色 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/

于 2012-11-21T21:58:53.880 回答
0

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

小提琴

.a{
    background-color: red;
    border: 2px solid red;
}
.b{
    background-color: green;
    border: 2px solid green;
}
.c{
    background-color: orange;
    border: 2px solid orange;
}
于 2012-11-21T22:00:13.080 回答