有人说,这个问题不是浏览器的缘故,而是缩放本身的机制导致的;
但是我发现谷歌缩放是没问题的,火狐就有问题
所谓缩放就是针对展示内容的像素进行缩减,当刚好到某一个点时,就会出现边框线消失的问题了
目前的方法就是:
需要对表格及单元格的边框线重新设置
th, td {
border-left: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
}
tr th:last-child,
tr td:last-child {
border-right: 1px solid #e8e8e8;
}
tr:first-child th {
border-top: 1px solid #e8e8e8;
}
还需要对表格重置下双边框问题
table {
border-spacing: 0; // 设置相邻单元格的边框间的距离 (仅用于“边框分离”模式)
border-collapse: unset; (collapse/separate)
border: 1px solid #000;
}
collapse 相邻的单元格共用同一条边框 (此属性火狐不兼容)
separate 每个单元格拥有独立的边框
这样在打印预览中,就可以发现边框线出来了


这篇博客探讨了浏览器缩放对表格边框显示的影响,特别指出火狐浏览器存在的问题。作者提供了一个解决方案,通过重置表格及单元格的边框样式,以及调整`border-spacing`和`border-collapse`属性,确保在打印预览中边框线能正常显示。这个方法对谷歌浏览器有效,也适用于火狐。
1万+

被折叠的 条评论
为什么被折叠?



