表格虚线边框需用border-style: dashed而非dotted，因前者渲染为短横线段、后者为圆点；必须配合显式border-width和border-color，并设置border-collapse: collapse以避免虚线断裂。
border-style: dotted 和 border-style: dashed 是两种不同样式，别混用。你要的是虚线（dashed），不是点线（dotted）——虽然都算“断续边框”，但视觉和语义完全不同。
为什么表格里写 border-style: dotted 看起来不像虚线？
因为 dotted 渲染出来是一串小圆点，dashed 才是短横线段。浏览器对这两种样式的实现很严格，不能靠调宽高“凑”效果。常见误操作是复制了点线代码却想得到虚线效果，结果边框细碎、间距不均、语义错位。
-
dotted在高 DPI 屏幕上容易糊成短线，尤其1px宽时几乎看不出点感 -
dashed的默认段长/间隙比由浏览器决定，但至少保证是“划-空-划”节奏，更符合“虚线”直觉 - 表格单元格（
td、th）若只设border-style: dotted而没配border-width和border-color，可能完全不可见（默认medium宽度在部分浏览器下被忽略）
表格四边统一虚线边框怎么写才可靠？
关键不是只写 border-style，而是用完整简写 + border-collapse 控制合并逻辑。否则每格自己画边，虚线会错位、重叠、断开。
- 必须给
table、th、td都设border: 1px dashed #999（显式声明宽度、样式、颜色） - 必须加
border-collapse: collapse到table上，否则相邻单元格边框不合并，虚线段在交界处断裂 - 避免用
border: none或border: 0清除某一边——它会破坏collapse逻辑，改用border-color: transparent更安全
只想某一行或某一列用虚线边框？
直接用方向性属性，但注意表格渲染顺序：行（tr）本身不渲染边框，真正生效的是它里面的 td 和 th。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 给第一行加顶边虚线：
tr:first-child td, tr:first-child th { border-top: 2px dashed #666; } - 给最后一列加右边虚线：
td:last-child, th:last-child { border-right: 1px dashed #ccc; } - 别写
tr:last-child { border-bottom: ... }——无效，tr没边框盒模型
border-image 能不能用来做精确虚线？
能，但表格里慎用。它依赖 border-image-slice 和渐变方向匹配，而表格单元格的边框尺寸动态变化（尤其内容撑开时），容易导致虚线图案拉伸、错位或截断。
- 如果真要用，只建议用于固定宽高的表头（
th）或装饰性分隔行 - 示例：
th { border: 2px solid; border-image: repeating-linear-gradient(90deg, #333, #333 8px, transparent 8px, transparent 16px) 1; } - 注意单位必须一致（全用 px），百分比或 em 在
repeating-linear-gradient中会导致节奏失控
最常被忽略的一点：表格虚线边框是否要响应缩放？border-width 写 1px 在 Retina 屏上可能发虚，写 0.5px 又不被所有浏览器支持。稳妥做法是用 1px + transform: scale(0.5) 模拟，但仅限于静态展示表格——交互型表格千万别这么干。
