HTML表格不支持虚实结合边框语法，需用CSS分层实现：通过border设实线、border-image或::after模拟虚线，并注意border-width≥2px、border-collapse影响及样式覆盖问题。
直接说结论：HTML表格本身不支持“虚实结合”的边框语法，必须靠 CSS 分层控制 —— 用 border 控制实线部分，用 ::after 或 border-image 模拟虚线部分，再通过定位或层级叠加实现视觉混合。
为什么 table 元素上直接写 border: 1px solid #000, 1px dashed #666 不生效
浏览器根本不认这种写法 —— border 是单值属性，不支持多层边框声明。CSS 规范里没有“虚实并存”的 border 值；所谓“结合”，本质是视觉叠加，不是语法合并。
- 给
<table>设border，会被border-collapse: collapse吃掉虚线细节，尤其在单元格交界处断开、错位 - 设
border-collapse: separate后，border-spacing会留白，虚线容易被撑开或对不齐 -
border-image在<table>上无效，必须作用在<td>或<th>上才起作用
用 td + border-image 实现左/右实线 + 上/下虚线
这是最可控的方案：把虚线逻辑从 border 样式里抽出来，交给 border-image 管理，实线保留原生 border。
- 先给
td设基础实线：border: 1px solid #333 - 再覆盖上/下边为虚线：
border-top: none; border-bottom: none;，然后用border-image补上 - 关键代码：
border-image: linear-gradient(90deg, #666 50%, transparent 50%) 1 repeat;—— 注意末尾的1是 slice 值，表示不拉伸只平铺 - 必须配
border-width: 2px（不能是1px），否则高清屏下虚线退化成实线 - 如果要仅在某几列生效，就单独加 class，比如
td.dashed-top-bottom
用伪元素 ::after 叠加虚线，绕过 border 渲染限制
当你要在已有实线表格上“额外加一条虚线”（比如表头下方划虚线分隔），伪元素是最稳的兜底方式。
立即学习“前端免费学习笔记（深入）”；
- 给
th加position: relative - 用
th::after绘制一条横贯的虚线：content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background: repeating-linear-gradient(90deg, #999, #999 2px, transparent 2px, transparent 4px); - 注意
z-index: 1确保它盖在内容上，但别遮住文字；移动端缩放时需测试 gap 是否变宽 - 这个方案完全不依赖
border-style: dashed，所以不会受 Chrome/Safari 渲染差异影响 - 不能用
border-bottom直接替代，因为实线边框和虚线伪元素会重叠出双线感
哪些地方最容易被忽略
真正卡住人的往往不是写法，而是渲染链路上的隐性约束：
-
border-width小于2px时，dashed在 Safari 和缩放 125% 的 Chrome 下大概率显示为实线 —— 不是 bug，是像素对齐妥协 - 表格用了
border-collapse: collapse，却还指望border-image生效，结果什么都没出来 - 给
<table>加了虚线样式，但 devtools 里 computed style 显示border-style: solid—— 说明被 reset CSS 或框架默认样式覆盖了 - 想用
outline模拟外虚线，但 outline 不响应border-radius，圆角表格+虚线外框会露馅
