border-style: dashed 是设置表格虚线边框最直接、兼容性最好的方式，但必须显式声明 border-width 和 border-color，否则虚线可能不显示或渲染不一致；表格整体加虚线需用 border 简写并注意 border-collapse 影响，单元格加虚线推荐配合 border-collapse: collapse，仅单边虚线须指定宽色，自定义节奏需用 repeating-linear-gradient 模拟，空元素需有尺寸才可见虚线。
border-style: dashed 是设置表格虚线边框最直接、兼容性最好的方式，但必须显式声明 border-width 和 border-color，否则虚线可能不显示或渲染不一致。
表格整体加虚线边框（<table> 标签）
给 <table> 元素本身加一圈虚线，适用于表容器外框：
- 必须用
border: <width> dashed <color>简写，例如border: 1px dashed #999；只写border-style: dashed不生效，因为默认border-width: medium在不同浏览器中宽度不统一 - 如果表格用了
border-collapse: collapse，<table>的 border 会被单元格边框“覆盖”，此时需额外设border-spacing: 0或改用outline - 内联写法：
<table style="border: 1px dashed #666;">，适合快速验证
表格单元格加虚线边框（<td>/<th>）
让每个单元格都有独立虚线边框，常见于数据表格或表单布局：
- 推荐配合
border-collapse: collapse避免双线重叠，再为td和th单独设边框：td, th { border: 1px dashed #ccc; padding: 6px; } - 如果不设
border-collapse，默认border-collapse: separate，单元格之间会有空隙，虚线会断开——这不是 bug，是预期行为 - 注意：单元格边框叠加后，相邻单元格的虚线段可能错位，视觉上“不连贯”，这是浏览器自动对齐导致的，无法靠 CSS 修正
只让某一边是虚线（比如仅下边框）
常用于分隔行或突出标题栏：
立即学习“前端免费学习笔记（深入）”；
- 用方向性属性，例如
th { border-bottom: 2px dashed #333; }，比border-style更精准 - 别只写
border-bottom-style: dashed，必须同时指定border-bottom-width和border-bottom-color，否则无效 - 若其他三边要透明/无边框，显式写
border-top: none; border-left: none; border-right: none;，避免继承父级样式干扰
想精确控制虚线节奏（比如 6px 实线 + 4px 间隙）
border-style: dashed 不支持自定义划长和间隔，此时只能绕过 border：
- 用伪元素 +
background-image: repeating-linear-gradient()模拟，例如：td::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background-image: repeating-linear-gradient(90deg, #000, #000 6px, transparent 6px, transparent 10px); } - 该方案需配合
position: relative在父元素上，且不参与盒模型计算，适合“装饰性”虚线 - 注意：
repeating-linear-gradient参数顺序不能错——第一个颜色起始，第二个颜色结束，单位必须一致（全用 px 或全用 %），否则虚线会消失或变成实线
真正容易被忽略的是：虚线是否“可见”，取决于元素是否有尺寸或内容。空 <td>、<div> 默认高度为 0，即使写了 border 也看不到——加 min-height、padding 或内容才能让它露出来。
