表格边框呈现“双线”是因浏览器默认使用border-collapse: separate，使相邻单元格边框并排显示；必须在table上设置border-collapse: collapse才能强制合并为单线，且需配合统一border定义，否则边框仍会“打架”。

为什么表格边框看起来像“交叉线”或“双线”

这不是边框真的交叉了，而是浏览器默认用 border-collapse: separate 渲染表格——每个 th、td 和 table 都有独立边框，相邻单元格的边框并排显示，视觉上就变成“加粗”或“重叠”，尤其在设置 border: 1px solid #000 后更明显。

必须加 border-collapse: collapse 才能消除“交叉感”

这个属性要写在 table 元素上，不是 th 或 td；它强制相邻边框合并为一条线，是解决“边框不交叉”的唯一可靠方式。

• border-collapse: collapse 必须配合 border 使用，只设它没边框也不显示
• 不能写成 border-collapse: separate（这是默认值，会加剧交叉感）
• 设了 collapse 后，border-spacing 会被忽略，不用再管它
• 如果用了 border-radius，记得加 overflow: hidden，否则圆角处边框可能溢出

只想要外边框，内部无边线？别漏掉这步

很多人以为只给 table 加 border 就行，结果发现内部还是有线。真正做法是：关闭所有单元格边框，只留 table 的边框，并确保 border-collapse: collapse 已启用。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 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 定义。漏掉任一环，边框就会“自己打架”。