border-style: double 必须配合 border-collapse: collapse 和 ≥3px 的 border-width 才能显示为真正的双线，否则仅为加粗单线；HTML 的 border 属性仅控制单线粗细，与 CSS double 无关，且已过时。

直接用 border-style: double，但必须配 border-collapse: collapse 和 ≥3px 的 border-width，否则不是双线，只是加粗单线。

为什么 table border="2" 不是双线边框

很多人写

后发现边框变粗了，但仍是单条实线。这是因为 HTML 的 border 属性只控制「单线」的粗细和颜色，和 CSS 的 double 完全无关。它在现代项目里还会干扰 CSS 样式、破坏响应式、无法设颜色或圆角，属于应被移除的遗留写法。

• 浏览器实际把它当 border: 1px solid #000 处理（颜色不可改）
• 如果同时写了 style="border: 2px double red"，border="2" 可能覆盖或冲突，结果不可预测
• 想删掉它？加一句 table[border] { border: none; } 强制重置

border-style: double 的硬性要求

CSS 的 double 是 W3C 标准值，渲染出两条等宽实线 + 中间等宽空白，总宽度 = 3 × 单线宽度。但它对参数很挑剔：

• border-width 必须显式设置，且建议 ≥3px；1px 或 thin 在多数浏览器下会退化为单线
• 不能和 border-radius 共存——圆角处双线断裂，Chrome 和 Firefox 表现不一致，干脆别混用
• 不支持单边设置：不能写 border-top-style: double 同时其他边用 solid，除非四边分别写全
• 只作用于当前元素边框，

上设了，

还是默认无边框，得单独给单元格也加

让整个表格呈现统一双线效果的关键组合

只给

加 double，顶多外框是双线，内部格线还是默认分隔线。要“满屏双线感”，必须三者齐上：

• border-collapse: collapse 必须设在

上，否则

边框各自绘制，双线错位、间距不均	和	都得显式设 border: 3px double #333，不能只靠继承 推荐写法：table, th, td { border: 3px double #333; } table { border-collapse: collapse; } 若用内联样式，务必写全简写：style="border: 3px double #333;"，漏掉 border-width 或 border-color 都可能失效 复古样式容易踩的兼容性和视觉坑 double 在 IE8 及更早版本不支持，但 2026 年绝大多数项目已无需兼容。真正要注意的是视觉一致性： 财经HTML高端海报生成 复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP 下载 深色背景 + 浅色双线（如 #fff on #333）比浅底深线更易看清双线结构 避免在高缩放比（如 150%）或打印预览中测试——部分浏览器会把 double 渲染成加粗 solid 如果设计稿要求“伪双线”（比如两道不同颜色/粗细的线），double 无法满足，得用 box-shadow 模拟，但维护成本高、移动端表现不稳定 双线边框的本质是「精确控制线条结构」，不是简单换样式。宽度、折叠、作用范围，三者缺一不可。漏掉任何一环，看到的都不是真正的双线。

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