必须为table、th、td统一设置border: 1px dashed #999并启用border-collapse: collapse，否则仅设table边框只显示外框，内部虚线因分离模型错位断裂。
直接写 border: 1px dashed #999 在 table 上，大概率只看到外框虚线，内部格线根本不出——这不是你代码错了，是表格边框模型默认不合并，虚线段各自起笔，自然断开、错位、重叠。
为什么 table { border: 1px dashed } 不生效？
浏览器对表格采用 border-collapse: separate（分离模型）作为默认行为，table、th、td 各自画自己的边框。即使都设了 dashed，相邻单元格的虚线段起点不同步，视觉上就是“断掉的线”或“双虚线”。更关键的是：table 的 border 只控制最外层矩形，它不会向下继承到 th/td。
-
table单独设虚线 → 只渲染外框，内部无格线 -
th和td没设border→ 再多collapse也出不来内虚线 - 只写
border-style: dashed不带宽度和颜色 → 多数浏览器用默认medium宽度，但该值不可控，Chrome 和 Firefox 渲染节奏不一致
让所有边框都出虚线的最小可行配置
必须三者同步：统一声明、合并边框、显式宽/色/样式。缺一不可。
- 在
table元素上加border-collapse: collapse—— 必须写在table上，写在tr或td无效 -
table、th、td都要写border: 1px dashed #999（不能只写border-style） - 避免
border-spacing干扰：设为0，否则虚线会被撑开、错位 - 推荐
border-width用1px或2px；小于1px（如0.5px）在高 DPI 屏幕下易退化为实线
示例 CSS：
table { border-collapse: collapse; }
table, th, td { border: 1px dashed #999; }
只想外边框虚线、内部无边框怎么办？
这不是“加什么”，而是“清干净”。常见错误是只给 table 加虚线，却忘了把 th/td 的边框彻底关掉。
- 先设
table { border: 1px dashed #999; border-collapse: collapse; } - 再设
th, td { border: none; }—— 注意不是border: 0，某些旧浏览器对0的处理仍有残留渲染 - 确保
border-spacing: 0，否则外框会被间隙撑变形 - 别用
outline模拟：它不参与布局计算，且无法单独控制某一边，也不支持border-radius
虚线看起来“抖动”“粗细不均”或“某边消失”？
这不是 bug，是 dashed 渲染机制决定的：浏览器按像素对齐虚线节奏，而表格单元格交界处的像素边界常有微小偏移。尤其在 border-collapse: collapse 下，相邻边框共享同一条线，但虚线段长/空隙由各自 border-width 推算，稍有差异就错位。
- 避免混用不同
border-width值（比如th用1px，td用1.5px） - 圆角
border-radius和collapse共存时更容易断裂，建议border-radius ≤ border-width × 2 - 若必须精确控制节奏（比如等长划+等距空），放弃
border，改用border-image: linear-gradient()或伪元素 +repeating-linear-gradient
真正卡住人的从来不是怎么写 dashed，而是没意识到表格边框是由多个独立元素共同参与渲染的；一旦调了 border-collapse 或 border-spacing，虚线行为就脱离直觉——哪怕只改一行 CSS，整行虚线都可能突然断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
