必须设置border-collapse: collapse才能实现真正可控的单线表格边框，否则会出现双线、断线、样式不可控等问题。
HTML表格边框不是“加个border属性就完事”的——不设border-collapse: collapse，90%的边框问题都出在这一步。
为什么加了border="1"还是没边框或显示双线
老式写法<table border="1">在现代浏览器里只是触发一个默认的<code>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不会显示——浏览器对未定义宽度的虚线行为不一致。
- 推荐用
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 class="table-wrapper">包裹，然后对这个<code>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远远不够。
