必须设置border-collapse: collapse才能实现真正可控的单线表格边框，否则会出现双线、断线、样式不可控等问题。

HTML表格边框不是“加个border属性就完事”的——不设border-collapse: collapse，90%的边框问题都出在这一步。

为什么加了border="1"还是没边框或显示双线

老式写法

在现代浏览器里只是触发一个默认的border-collapse: separate + border-spacing: 2px组合，结果是：外框有、内格线断开、列间留白缝、颜色样式全不可控。它不支持dashed、不能设圆角、无法单独控制某一行边框。

• Chrome/Firefox 实际把它当border: medium solid currentColor + border-spacing: 2px处理，medium宽度模糊且不一致
• 哪怕你额外写了style="border: 1px dashed #666"，只要没显式声明border-collapse，虚线依然会断成一截一截
• 想兼容 IE8？得退回去用cellspacing="0"，但这个 HTML 属性只接受整数像素，没法写0.5或em

三步写出真正可控的单线表格边框

必须按顺序写这三句 CSS，缺一不可：

• table { border-collapse: collapse; } —— 合并所有交界边框，这是消除“双线感”的唯一开关
• table { border: 1px solid #333; } —— 控制整个表格的外边框（不写这句，表格就没外框）
• th, td { border: 1px solid #333; } —— 控制所有单元格的内边框（不写这句，格子之间就没线）

漏掉任意一句，都会出现边框缺失、局部加粗、颜色错位。特别注意：border-collapse只能写在table上，写在tbody或tr上无效。

想用虚线、点线或只给某几行加边框？靠伪类和单边属性

border-style: dashed必须配明确的border-width，只写border-style: dashed不会显示——浏览器对未定义宽度的虚线行为不一致。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 推荐用1px dashed #ccc（短密虚线）或2px dashed #999（稳重清晰），避免0.5px或em单位，缩放时易糊或消失
• 第一行下边框虚线：tr:first-child td { border-bottom: 1px dashed #999; }
• 最后一列右边框虚线：td:last-child, th:last-child { border-right: 1px dashed #999; }
• 表头加粗实线 + 数据区细虚线？分开写：th { border: 2px solid #444; } 和 td { border: 1px dashed #ddd; }，但要确保border-collapse: collapse已启用，否则交界处会按“粗覆盖细”规则渲染

圆角边框为什么总不生效？关键在包裹和分层控制

table元素本身几乎不响应border-radius，尤其在border-collapse: collapse下。直接写table { border-radius: 6px; overflow: hidden; }在 Chrome/Firefox 中大概率无效。

• 必须用外层
  包裹，然后对这个div设border-radius和overflow: hidden
• 若坚持用collapse，还得手动给首行th:first-child/th:last-child加border-top-left-radius/border-top-right-radius，末行td:first-child/td:last-child加border-bottom-left-radius/border-bottom-right-radius
• 如果改用border-collapse: separate，就得同步设border-spacing: 0，否则圆角会被间距撑开

最常被忽略的点：圆角是否生效，取决于你用的是collapse还是separate模型，以及有没有把圆角样式落到具体单元格上——光靠外层div远远不够。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！