直接用border设置蓝色虚线边框会失效，根本原因是默认border-collapse为separate，table外边框被td/th内部边框覆盖；要实现虚线网格，必须配合border-collapse: collapse并统一给td/th设border。
直接用 border 设置蓝色虚线边框会失效？
很多人写 table { border: 1px dashed blue; } 发现没效果，根本原因是：默认情况下 border-collapse 是 separate，此时 table 元素的边框只画在表格最外层四边，但内部单元格（td/th）也有自己的边框，视觉上会被覆盖或干扰。
真正起作用的不是“要不要加边框”，而是“谁来画边框、怎么合并”。必须明确指定边框归属对象：
- 若只要外框：给
table单独设border，同时确保td/th没有边框（或设为none） - 若要全表虚线网格：必须给
td和th设border，并配合border-collapse: collapse -
border-collapse: collapse不是可选优化项，而是虚线网格能对齐显示的必要条件
border-collapse: collapse 下如何让虚线不“断开”
即使用了 collapse，dashed 边框在单元格交界处仍可能错位、断开——这是 CSS 渲染限制，不是 bug。关键在于统一所有边框的宽度、样式、颜色，且避免混合使用 border-top/border-bottom 等单边属性。
推荐写法（可靠且易维护）：
立即学习“前端免费学习笔记（深入）”；
table {
border-collapse: collapse;
}
td, th {
border: 1px dashed #409EFF; /* 用十六进制比 color name 更稳 */
padding: 8px;
}注意点：
- 不要单独给
tr设边框——tr不支持border（多数浏览器忽略） - 避免混用
1px dashed和2px dashed，虚线节奏会不同步 - 如果表格有
colspan或rowspan，虚线在合并单元格边界处可能轻微偏移，属正常渲染行为
只显示上下边框为蓝色虚线，去掉左右边框
这个需求常见于表头或分隔行，但直接对 tr 或 td 写 border-top + border-bottom 容易被 border-collapse 合并规则干扰，导致左右边框“意外出现”。
安全做法是绕过 collapse 逻辑，改用伪元素或额外容器：
- 方案一（推荐）：给目标行（如
thead tr）设border-top和border-bottom，同时把table的border-collapse改为separate，再用border-spacing: 0消除间隙 - 方案二：用
::after伪元素在tr下方画一条虚线，完全脱离表格边框模型 - 绝对不要依赖
border-left: none——在collapse模式下它可能被相邻单元格边框“顶出来”
简洁可用的 CSS：
table {
border-collapse: separate;
border-spacing: 0;
}
thead tr {
border-top: 1px dashed #409EFF;
border-bottom: 1px dashed #409EFF;
}
td, th {
border: none; /* 确保单元格自身无边框 */
}兼容性与性能要注意什么
dashed 边框在旧版 Safari（
实际项目中建议：
- 若需强兼容，用
border-style: dotted替代dashed（点线渲染更一致） - 避免在大量行（>500 行）的表格中对每个
td应用dashed——重绘开销明显，滚动卡顿 - 深色背景上慎用浅蓝（如
#add8e6），虚线在高对比下易“消失”，推荐用#409EFF或#1890ff
最常被忽略的一点：虚线边框的“虚”是相对的。当单元格高度小于 2 倍边框宽度时，虚线可能退化为点状或不可见——务必检查最小行高是否 ≥ 2 * border-width。
