有没有办法可以防止虚线边框合并？

Posted 2023-03-05

【中文标题】有没有办法可以防止虚线边框合并？

【英文标题】：Is there a way I can prevent dashed border to merge?

【发布时间】：2014-01-13 22:54:29

【问题描述】：

我已将border:dashed 应用于我的表格单元格，并且在某些地方，破折号与其他表格单元格的破折号合并。见下图。有没有办法可以在不直接将样式应用于行的情况下防止这种情况发生？

后期编辑：我直接将样式应用到tr 并得到相同的结果。

【问题讨论】：

只给一侧边框。 td border-bottom:1px dashed black;

我们需要查看您的 CSS，但听起来您可以在表格 rows 而不是表格 cells 上设置底部边框跨度>

我认为这个问题已经得到解答，最好在这里得到解释***.com/questions/9786963/…。

【参考方案1】：

你必须折叠你的table元素的border，所以去掉它并使用border-collapse: separate;和border-spacing: 1px;来代替

table 
    border-spacing: 1px;
    border-collapse: separate;


table tr td 
    border-bottom: 1px dashed #000;

Demo

Demo 2 （边框为collapsed时看边角）

【讨论】：

你的回答是对的，它确实符合我的要求。但结果仍然很丑陋，我想我最终会使用背景图像来获得所需的效果——连续的、同样虚线的边框。非常感谢您提供的信息！