border-collapse: collapse是解决表格边框双线、断开、发虚的唯一可靠方式，必须设在table上，配合table、th、td统一border样式（如dotted）才能实现连贯边框。
table和td都要设border: dotted，否则边框不连续
只给 table 设 border: 2px dotted #999，单元格之间依然没点；只给 td 或 th 设，又会漏掉外框。必须三者都覆盖：table、th、td 同时声明相同或兼容的 dotted 边框，才能形成完整、连贯的点状轮廓。
常见错误是只设其中一两个，结果出现：外框有圆点但内部无边框，或内部有点但外框消失，或点在单元格交界处错位断裂。
- 推荐写法：
table, th, td { border: 1px dotted #777; } - 若想外框更醒目，可单独加强：
table { border: 2px dotted #555; }，但需确保th/td的边框宽度 ≤ 外框，否则折叠后点会重叠变形 - 别用
border: none或border: 0覆盖某一层，会直接切断点状连接
必须加border-collapse: collapse，否则dotted边框会双线重叠
dotted 边框在默认分离模型下，th 和相邻 td 的点会各自渲染，导致交界处出现两排点、间距错乱，甚至点被截断。只有启用 border-collapse: collapse 才能让浏览器把相邻边框合并为一条逻辑线，点才能均匀分布、对齐一致。
这个属性必须作用于 table 元素本身，写在 th 或 td 上无效。
立即学习“前端免费学习笔记（深入）”；
- 正确位置：
table { border-collapse: collapse; } - 不能省略单位——
collapse是值，不是数字，别写成border-collapse: 1或border-collapse: true - 如果表格嵌套，内层
table也要单独设border-collapse，父级设置不会继承
dotted在不同浏览器里点大小不一致，靠border-width微调最可靠
Chrome 渲染的点偏小、间距密；Firefox 点略大、间距松；Safari 则居中。想让点看起来“差不多”，不要改颜色或加阴影，直接调 border-width 更有效——加宽会让点更饱满，变窄则更细碎。
实测 1px 在多数浏览器里点太细易断，3px 起步更稳；4px 以上点清晰但可能显得笨重，尤其小字号表格里。
- 通用起点：
border: 2px dotted #888 - 要突出点感：
border: 3px dotted #666 - 慎用
border-radius：虽然border-radius: 100%对部分点有圆润效果，但 IE 和旧 Edge 不支持，且和dotted组合时角落易出锯齿
别用box-shadow或background-image模拟dotted边框
有人为“控制点间距”尝试用 box-shadow: 0 0 0 1px #999 叠多层，或切点图做 background，结果反而更糟：响应式缩放时点糊成线、高DPI屏上模糊、打印时丢失、性能还差。
原生 border-style: dotted 是浏览器原生绘制，IE9+ 全支持，语义正确，加载零开销。只要配好 border-collapse 和宽度，它就是最干净的解法。
真正难的不是画点，而是让点在表格结构里不断、不叠、不跳——这三点全靠 table + th + td 三者统一设 dotted，再用 border-collapse: collapse 锚定渲染逻辑。其他花招，基本都是绕远路踩坑。
