dotted 渲染为等距圆点，小字号易糊成实线；dashed 渲染为等长短线段，窄边框下可能断续不均；需配合 border-collapse: collapse 使用，并注意 IE 兼容性及跨行列处理。
border-style: dotted 和 border-style: dashed 的实际效果差异
点划线在 CSS 里常被误认为是单一样式，其实 dotted 和 dashed 渲染逻辑完全不同：前者是等距圆点（浏览器用像素级实心圆模拟），后者是等长短线段。表格边框用 dotted 时，小字号下容易糊成实线；dashed 在窄边框（如 1px）下可能显示为断续不均的虚线——这不是 bug，而是各浏览器对“最小可绘单元”的处理差异。
实操建议：
- 优先用
border-style: dashed实现传统意义的“点划线”，更可控 - 若坚持用
dotted，至少设border-width: 2px，避免 Chrome/Firefox 渲染失真 - 别依赖
border-image模拟点划线——表格单元格合并（colspan/rowspan）会破坏切片对齐
table { border-collapse: collapse } 对边框样式的决定性影响
没加 border-collapse: collapse 的表格，默认是 separate 模式，此时 border 作用于每个单元格独立边框，相邻单元格的边框会重叠或留缝，导致点划线断开、错位，甚至出现双线重影。
必须显式设置：
立即学习“前端免费学习笔记（深入）”；
table {
border-collapse: collapse;
}
table td,
table th {
border: 1px dashed #999;
}注意：collapse 模式下，border-spacing 失效，且 border 宽度以“最大值优先”合并（比如左单元格设 2px dashed，右单元格设 1px dotted，最终显示为 2px dashed）。
IE 和旧版 Edge 下 dotted/dashed 不渲染的兼容处理
IE11 及更早版本对 border-style: dotted 支持不稳定，尤其在 border-width 为奇数像素时，可能退化为实线；dashed 在 IE 中默认比 Chrome 更“稀疏”，短线段长度固定为 6px，不可调。
稳妥方案：
- 放弃纯 CSS 点划线，改用背景图：
border: 1px solid transparent; background: linear-gradient(90deg, #999 50%, transparent 50%) repeat-x;（需配合background-size: 4px 4px调节密度） - 或降级为细实线 + 颜色弱化：
border: 1px solid #ccc，视觉上接近点划线的“轻量感” - 不要用
outline替代border——它不参与文档流，无法对齐单元格边界
td/th 单独设 border 导致内边框重复的问题
直接给 td 和 th 设 border 后，表格最外层边框会由四个角单元格的边框拼合，但顶部/左侧边框可能被重复绘制（比如 thead th 和 tbody td 都设了上边框），造成局部线条变粗或虚线错位。
正确做法是分层控制：
table {
border: 1px dashed #999; /* 外边框 */
border-collapse: collapse;
}
th,
td {
border-right: 1px dashed #999;
border-bottom: 1px dashed #999;
}
/* 去掉第一行的上边框、第一列的左边框 */
th:first-child,
td:first-child {
border-left: none;
}
tr:first-child th,
tr:first-child td {
border-top: none;
}这样能确保每条线只画一次，点划节奏统一，也方便后续用 :nth-child 控制隔行边框。
真正麻烦的是跨行跨列单元格——rowspan 和 colspan 会让边框计算失效，此时只能手动给 td[rowspan] 补右/下边框，再用 border-color: transparent 隐藏不需要的边。
