虚线边框需为table、th、td三者显式设置border: 1px dashed #666；禁用border-collapse: collapse，保持separate模型；避免混用边框样式，优先用伪元素实现装饰性外框。
table、th、td 都要设 border-style: dashed
直接给 <table> 加 <code>border: 1px dashed #000 是不够的——浏览器默认用“分离边框模型”，<th> 和 <code><td> 会用自己的边框，结果虚线重叠、错位、粗细不均。
<p>必须显式给三者都设虚线样式：</p>
<ul>
<li><code>table, th, td { border: 1px dashed #666; }
table { border: ... }，否则单元格内部边框还是实线或无边框th, td { border: none; }，再给 table 加虚线
border-collapse: collapse 不适用于虚线边框
这个属性会让相邻边框合并成一条线，对 solid 边框很友好，但对 dashed 会破坏虚线节奏：原本每格独立的短划线会被“拼接”成不规则长虚线，甚至出现断点错位。
所以虚线表格应保持默认的 border-collapse: separate（不用写，就是默认值）：
- 删掉任何
border-collapse: collapse声明 - 若已存在，注释或移除它
- 想控制单元格间距？用
border-spacing: 2px替代，它不影响虚线完整性
只让表格外框是虚线，内部是实线或无边框
常见需求：表格外一圈是虚线，内部格线用实线或干脆不要。这靠选择器优先级和覆盖实现：
- 先统一设内边框：
th, td { border: 1px solid #ccc; } - 再用更具体的选择器盖掉外边框：
table > thead > tr:first-child > th, table > tbody > tr:last-child > td { border-bottom: 1px dashed #000; } - 或者用伪元素模拟外框：
table { position: relative; }+table::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px dashed #999; pointer-events: none; }
虚线在不同浏览器渲染不一致？检查这些细节
dashed 的划线长度和间隙由浏览器决定，无法精确控制，但以下几点能大幅减少差异：
- 避免用太细的宽度（如
0.5px），至少用1px起步，否则某些浏览器会渲染成点状或消失 - 颜色别用半透明（
rgba(0,0,0,0.5)），部分旧版 Safari 对虚线透明度支持异常 - 别混用
border-style值：比如border: 1px dashed red; border-top-style: solid;会导致顶部变成实线，其余三边虚线——但视觉上可能不连贯 - 移动端缩放时虚线易糊，加
transform: translateZ(0)或backface-visibility: hidden可触发硬件加速，提升清晰度
border-collapse 和选择器组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
