点状边框需同时设置table、th、td的border为dotted且配合border-collapse:collapse；仅设部分元素会导致错位或断续；dotted跨浏览器渲染不一致，高要求场景应改用背景图、伪元素或svg替代。
table、th、td 的 border-style 必须统一设为 dotted
点状边框不是只给 table 加 border: 1px dotted #999 就完事的。浏览器默认把 table、th、td 当作独立元素渲染，如果只设其中一两个，会出现部分单元格有圆点、部分没边框，或者点与点错位的混乱效果。
必须同时作用于三者：
table, th, td {
border: 1px dotted #999;
}
否则你看到的“点”可能是 th 的上边 + td 的下边叠加出来的双层点，视觉上变粗或模糊。
border-collapse: collapse 是点状边框清晰显示的前提
不加 border-collapse: collapse，点状线会因默认的 border-collapse: separate 而被撑开：每个单元格边框独立绘制，点之间留出空隙，导致点线断续、不连贯，甚至在 Chrome 中出现点偏移或消失。
正确写法是：
table {
border-collapse: collapse;
}
注意：border-collapse 只能加在 table 元素上，对 th 或 td 设置无效。
常见错误：只写 border-collapse: collapse 却漏掉 table, th, td 的 border 声明——结果是表格彻底没边框，因为 collapse 不会自动创建边框，它只管怎么合并已存在的边框。
dotted 在不同浏览器中渲染差异大，别依赖像素级对齐
dotted 不是标准几何点阵，而是由浏览器按当前字体、缩放、DPI 自行渲染的近似效果。Firefox 可能渲染成小圆，Chrome 偏向方形点，Safari 在 Retina 屏上点更细密，甚至同一浏览器不同版本表现也不同。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
如果你需要严格等距、大小一致的“点”，不要用 border-style: dotted，改用：
- 背景图（
background-image: repeating-linear-gradient(...)） - 伪元素 +
box-shadow模拟点列 - SVG 边框（适合固定尺寸表格）
简单项目用 dotted 没问题，但做设计系统或要过 UI 验收时，得提前跟设计师对齐“点”的容忍范围。
想让点状边框只出现在外侧？用 border-* 单独控制
点状线默认会画满所有边，但实际常需“仅外边框”或“仅内边框”。这时不能靠 border-collapse，得手动拆解：
例如，只保留表格最外一圈点线，去掉内部单元格分隔线：
table {
border: 1px dotted #999;
border-collapse: collapse;
}
th, td {
border: none; /* 清掉所有单元格边框 */
}
反过来，如果只要内部横/竖线是点状（类似网格），就只给 th, td 设 border-bottom 或 border-right，table 本身不设 border。
注意：border-top 和 border-bottom 在 th 上生效，但若表格首行是 thead，记得也选中 thead th，否则表头顶部可能漏点。
点状边框真正难的不是写法，而是它天生不稳定——颜色、字号、缩放、设备像素比都会影响点的密度和可见性。上线前务必在真实设备和主流浏览器里快速过一遍，别只信开发机上的 Chrome 预览。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
