表格边框呈现“双线”是因浏览器默认使用border-collapse: separate，使相邻单元格边框并排显示；必须在table上设置border-collapse: collapse才能强制合并为单线，且需配合统一border定义，否则边框仍会“打架”。
为什么表格边框看起来像“交叉线”或“双线”
这不是边框真的交叉了，而是浏览器默认用 border-collapse: separate 渲染表格——每个 th、td 和 table 都有独立边框，相邻单元格的边框并排显示，视觉上就变成“加粗”或“重叠”，尤其在设置 border: 1px solid #000 后更明显。
必须加 border-collapse: collapse 才能消除“交叉感”
这个属性要写在 table 元素上，不是 th 或 td；它强制相邻边框合并为一条线，是解决“边框不交叉”的唯一可靠方式。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
border-collapse: collapse必须配合border使用，只设它没边框也不显示 - 不能写成
border-collapse: separate（这是默认值，会加剧交叉感） - 设了
collapse后，border-spacing会被忽略，不用再管它 - 如果用了
border-radius，记得加overflow: hidden，否则圆角处边框可能溢出
只想要外边框，内部无边线？别漏掉这步
很多人以为只给 table 加 border 就行，结果发现内部还是有线。真正做法是：关闭所有单元格边框，只留 table 的边框，并确保 border-collapse: collapse 已启用。
table { border: 2px solid #333; border-collapse: collapse; }th, td { border: none; padding: 10px; }- 如果用了
cellspacing="0"这类 HTML 属性，建议删掉——CSS 已接管，混用反而易冲突
虚线、点线或圆角边框怎么避免“断开”或“错位”
用 border-style: dashed 或 dotted 时，border-collapse: collapse 依然生效，但不同浏览器对虚线拼接的处理略有差异；圆角则依赖 border-radius 和 overflow: hidden 协同。
table { border: 1px dashed #999; border-collapse: collapse; border-radius: 4px; overflow: hidden; }- 不要给
th或td单独设border-radius——它只对table本身起作用 - 虚线在小尺寸单元格里可能显示不全，建议最小边框宽度 ≥ 2px，或改用
solid+ 透明度控制 - 若需第一行/最后一行特殊边框（比如仅上边框或下边框），用
th:first-child或td:last-child精确控制，而不是靠collapse猜测
table 上的 border-collapse: collapse + 统一 border 定义。漏掉任一环，边框就会“自己打架”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
