table直接加border不出虚线，因默认无边框且border-collapse影响渲染；用separate+border-spacing:0+统一td/th虚线最稳定，collapse下需用box-shadow或背景图模拟。
table 元素直接加 border 不出虚线？先看默认行为
HTML <table> 默认没有边框，即使设了 border="1"，渲染出的也是实线（且是旧式 HTML 属性，现代 CSS 优先）。真正控制虚线边框的是 CSS 的 border-style，但必须注意：浏览器对 border-collapse 的处理会覆盖你预期的虚线效果。
常见错误现象：td { border: 1px dashed #999; } 写了却只看到部分虚线、或虚线断开、或相邻单元格边框重叠变粗——这基本都是 border-collapse 默认值 separate 和 collapse 切换没配对导致的。
-
border-collapse: separate（默认）：每个td/th独立画边框，虚线能完整显示，但单元格间有空隙，需用border-spacing控制 -
border-collapse: collapse：边框合并，节省空间，但虚线可能被截断或“拼接失败”，尤其在 Chrome/Firefox 渲染差异明显
用 border-collapse: separate 实现稳定虚线边框
这是最可控的方式，适合需要清晰、连续虚线的场景（如表单分组线、数据区隔线）。关键不是“怎么写虚线”，而是“怎么避免边框打架”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
table设border-collapse: separate，显式声明，别依赖默认 - 用
border-spacing: 0消除单元格间隙，否则虚线之间会出现白缝 - 对
td和th统一设border: 1px dashed #ccc；若只要外边框，就只设table的border，内部单元格不设边框 - 注意：IE8+ 支持
dashed，但 IE7 及更早只认dotted，如需兼容可备选border-style: dotted
table {
border-collapse: separate;
border-spacing: 0;
}
td, th {
border: 1px dashed #ccc;
}
想用 border-collapse: collapse？虚线得加“补丁”
当表格密集、强调紧凑性（如后台数据列表），collapse 更省空间，但原生 dashed 在合并边框时容易断裂——因为两个相邻 td 的虚线起始位置不同，拼一起就错位。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
解决思路不是强行调 border，而是绕过合并逻辑：
- 只给
table设外边框：border: 1px dashed #999，内部单元格不设边框 - 用
box-shadow模拟内部分割线（例如给tr:nth-child(n+2)加box-shadow: inset 0 1px 0 #eee） - 或改用背景图：
background-image: linear-gradient(to bottom, transparent 50%, #ddd 50%); background-size: 100% 1px;配合background-repeat: repeat-x画横线
性能提示：大量行用 box-shadow 或 background-image 比每单元格画虚线更轻量。
移动端虚线边框模糊？检查像素和缩放
在 Retina 屏或 zoom=110% 的桌面浏览器中，1px dashed 可能被渲染成 1.5px 或模糊带，虚线点变成小方块连成的“糊线”。
应对方式：
- 用
transform: scaleY(0.5)缩放伪元素来画线（需配合position: absolute和负 margin 微调位置） - 改用 SVG 作为
border-image源，保证缩放不失真 - 更务实的做法：接受
1px solid在高 DPI 下的实际表现，或提升到2px dashed并调浅颜色，视觉上反而更稳
真正容易被忽略的是：虚线边框从来不是“设个样式就完事”的事，它牵扯布局模型、渲染引擎差异、设备像素比三重变量。哪怕只是换了个 Chrome 版本，collapse 下的虚线对齐都可能微调。动手前先在目标环境真机/真浏览器里跑一遍。
