Firefox 中不同单元格的边框宽度显示不同

Posted 2023-03-05

【中文标题】Firefox 中不同单元格的边框宽度显示不同

【英文标题】：Border width showing differently for different cells in Firefox

【发布时间】：2013-03-14 19:36:50

【问题描述】：

我正在动态生成大约 55 行和 15 列的表格。我已经像这样将列的边框宽度设置为 1px

#tblId td

    border:1px solid #616161;
    background-color:#EEEEEE;

但是对于某些单元格，它显示的边框比 1px 厚！ 这是我的表格的一部分，您可以看到上列和下列的边框差异

编辑

这是小提琴http://jsfiddle.net/bz3Da/2/

这真的很奇怪，它在小提琴中看起来不错，但在我的最后却没有，我检查了没有其他类影响表。

【问题讨论】：

你能创建小提琴..吗？您要追加到现有表吗？

您是否尝试使用 css 重置 (***.com/questions/3485720/…)，因为浏览器自身的样式可能会影响它

这可能与渲染小线条的浏览器端问题有关...您是否尝试将其更改为 2 或 3 像素边框，看看是否仍然存在？

您是否尝试过重置 Firefox 的缩放设置？

@Tobia - 是的，没用 :(

【参考方案1】：

http://jsfiddle.net/bz3Da/4/

添加 !important：

    #tblId td
    
        border:1px solid #616161 !important;
        background-color:#EEEEEE;
    

内联样式比 CSS 样式更重要。 您可以覆盖它们，但您应该避免使用 !important - 只需删除内联样式并仅使用 CSS。

这里已经有人问为什么了： Should I avoid using !important in CSS?

【讨论】：

!important 有效，但我确实希望有几行比其他行更宽，!important 使所有子更改撤消，因此我无法获得任何超过 1px 的行

@PawanNogariya - 您已经定义了边框的内联样式，您必须更改这些值以获得所需的粗细。

那我怎么能只给几个单元格 2px 边框，而所有其他单元格边框 1px？

删除您添加到此网格的所有内联样式，默认使用 css 设置单元格样式并为其分配 1px 边框，定义一个将边框更改为 2px 的类并将该类添加到所需的单元格。

@PawanNogariya - 然后修改您的 jsfiddle 项目，向我们展示究竟是什么不起作用。

【参考方案2】：

我重置了 Firefox 缩放。有用！！！ 完美的。 我发现当我放大某些边框时会变粗。 打击是我的cssenter代码 火狐 50.1 / windows 7

table td, table th   border: 1px solid #e8e8e8;
table 
  border-collapse: collapse;
  border-spacing: 0;