border-style: double 是 w3c 规范唯一定义的合法双线边框实现方式，需配合明确宽度（≥3px）和颜色，并设置 border-collapse: collapse 才能使表格内外边框统一呈现标准双线效果。

border-style: double 是唯一标准解法

想让 HTML 表格呈现真正双线边框，border-style: double 是 W3C 规范唯一定义的合法方式。它会渲染出两条等宽、等距的平行实线，中间留白，不是视觉错觉，也不是叠加出来的假效果。

常见错误是误用 border="2" 或只写 border-width: 2px —— 这些只会加粗单线，跟“双线”无关。也别用 outline 或两个 <hr> 拼凑，前者不支持 double（Safari 旧版除外），后者语义错误且响应式下极易错位。

• border-style: double 必须配合明确的宽度和颜色，例如 border: 3px double #333；只写 border-style: double 不生效
• 宽度低于 2px 时，多数浏览器会退化为单线渲染，建议起步用 3px
• 颜色不能省略，即使要黑色也得显式写 #000 或 black

表格内部格线也要双线？必须用 border-collapse: collapse

只给 <table> 加 <code>border: 3px double，只能让外框变双线；单元格之间仍是默认分隔线，甚至可能因 border-collapse: separate（默认值）导致相邻双线错位、间距不均。

要整个表格——包括所有 <td> 和 <code><th> 的内外边框——都统一呈现双线感，必须强制合并边框模型： <ul><li>在 <code><table> 上设置 <code>border-collapse: collapse，这是前提，否则各单元格的双线边框“各自为政”

同时给 table、th、td 都设 border: 3px double #333，否则只有外框或只有内线

避免混用 HTML border="1" 属性——它会触发 separate 模型，与 CSS 冲突，且颜色样式不可控

复古感双线边框容易踩的兼容性坑

现代项目基本不用考虑 IE8 及更早版本，但仍有几个细节影响“复古感”的真实还原：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• border-radius 和 border-style: double 无法共存：圆角会截断双线结构，浏览器直接忽略双线或渲染异常；若设计需圆角，得换思路，比如用 box-shadow 模拟外线 + border 画内线
• 打印样式中，部分打印机驱动对 double 支持不稳定，可能降级为单线；如需确保打印效果，建议测试并备选 dashed 或 solid + 加粗
• 高对比度模式（Windows 系统）下，某些双线可能被系统强制合并，视觉上变粗而非双线；这不是代码问题，而是系统级渲染限制

内联 style 调试可行，但别长期用

快速验证双线效果时，直接写内联 style 没问题，比如：

A

B

但注意两点：引号嵌套要小心（如属性值含双引号就得用单引号包裹），且 style 中不要加 !important——内联样式本身优先级已最高，加了反而干扰调试。

上线项目务必抽离到 CSS 类里，比如定义 .table-double 统一控制，否则后期改颜色或宽度时，每处都要手动替换，维护成本极高。

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