必须同时为table、th、td设置border-style: dashed并应用border-collapse: collapse，否则仅table设虚线只能显示外框，内部无法形成网格状虚线；遗漏collapse会导致虚线错位、重复或断裂。

table、th、td 都要设 border-style: dashed，但必须加 border-collapse: collapse

直接给 table 元素写 border: 1px dashed #999，只能画出外框一圈虚线，内部单元格之间还是实线或无边框。真正让整个表格呈现「网格状虚线」的关键是：必须同时控制三层元素——table、th、td，且统一用 dashed，再用 border-collapse: collapse 合并边框。

常见错误是只设 table { border: 1px dashed #999 }，结果只有外框虚线，内部全是空白或默认实线；或者忘了 border-collapse，导致虚线重复叠加、粗细不一。

• 必须显式设置 th, td { border: 1px dashed #999 }，不能只靠继承
• border-collapse: collapse 必须写在 table 上，写在 th 或 td 上无效
• 如果用了 border-collapse: separate（默认值），虚线会错位、断开，甚至出现双虚线

只让表格外框虚线，内部实线？用 border + outline 组合

原生 border 不支持“外框虚线 + 内部实线”的混合样式。强行给 table 设虚线、th/td 设实线，border-collapse: collapse 会把它们强行合并，最终渲染结果不可控——可能全变虚线，也可能虚实混杂、断裂。

稳妥做法是放弃用 border 控制内部分隔线，改用 outline 包裹外框：

• table { outline: 2px dashed #666; outline-offset: -2px; } → 虚线紧贴外边缘
• th, td { border: 1px solid #ccc; } → 内部保持清晰实线分隔
• 注意 outline-offset 为负值才能让虚线“压”在外边沿，正值会悬空

border-style: dashed 在表格里容易被忽略的坑

表格场景下，dashed 的表现比普通 div 更敏感。浏览器对虚线段长和间隙的计算，会受单元格尺寸、字体大小、缩放比例影响，尤其在小字号或窄列时，虚线可能退化成点状甚至消失。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• 虚线最小可渲染宽度 ≈ border-width × 1.5；设 0.5px dashed 基本不可见，建议 ≥ 1px
• 列宽 dotted 更稳定
• border-radius 和 dashed 在表格上基本无效——table 不支持圆角，th/td 加了也只在单格生效，且虚线在拐角处必然断裂

需要精确控制虚线节奏？别硬刚 border-style，用 background-image 模拟

border-style: dashed 完全不提供虚线长度、间隔参数。想实现 “4px 实线 + 8px 空隙” 这类设计，必须绕过 border，用背景图模拟。

最简方案是给 th, td 设置重复线性渐变：

background-image: repeating-linear-gradient(
  to right,
  #999,
  #999 4px,
  transparent 4px,
  transparent 12px
);

这个方案的问题很实在：

• 必须配合 background-clip: padding-box，否则虚线会盖住文字
• 横向虚线用 to right，纵向虚线得切到 to bottom 并改写尺寸
• IE 不支持 repeating-linear-gradient，若需兼容 IE11，得 fallback 到 SVG border-image

表格虚线真正的复杂点不在写法，而在于“一致性”——同一张表里，不同列宽、不同内容高度、不同缩放级别下，dashed 的视觉密度天然不均。与其反复调参，不如提前约定：虚线仅用于示意性分隔，关键数据分隔仍用实线或留白。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！