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

Posted

技术标签:

【中文标题】更改表格的边框而不导致表格调整大小【英文标题】:Changing the border on table without causing a table to resize 【发布时间】:2012-11-10 05:40:41 【问题描述】:

我早些时候向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 的白色边框厚度,但我最终会在角落处出现奇怪的连接,而在四肢处出现不对称的边框。

【问题讨论】:

是否使用outline 选项?不利的一面是所有 4 个边都必须应用笔画,但有利的一面是它不会像边框那样影响元素的宽度。 是的 - 可能是(我不知道)。可以和桌子一起使用吗? 几乎适用于任何东西。 【参考方案1】:

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

【讨论】:

【参考方案2】:

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

【讨论】:

好的 - 我会试试这个。我也只是认为将一组大小匹配的 div 与我可以设置样式的列叠加起来可能更简单。【参考方案3】:

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

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

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

【讨论】:

【参考方案4】:

如果您没有边框并添加边框,事情就会变得一团糟。相反,如果您确实有一个边框并改变它的颜色,结果会好得多。至少可以说,没有跳跃。如果您的 JSFiddle 示例代表了您真正想要做的事情(即纯色 td),那就是我会做的。

.abackground-color: red; border: 2px solid red; 
.bbackground-color: green; border: 2px solid green;
.cbackground-color: orange; border: 2px solid orange;

查看完整示例:http://jsfiddle.net/grNr8/9/

【讨论】:

【参考方案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;

【讨论】:

以上是关于更改表格的边框而不导致表格调整大小的主要内容,如果未能解决你的问题,请参考以下文章

markdown 怎么调整表格的宽度

excel画的图表 如何调整图表与图表边框的距离、位置

HTML 表格中的文本框:如何自动调整大小?

CSS图像边框翻转效果而不调整图像大小?

PyQt5:QSortFilterProxyModel 导致表视图标题重置其部分调整大小模式

word里面,给图片加了个边框,怎么调边框和图片之间的距离?