唯一可靠方式是用 border-style: double 配合 border-collapse: collapse；不设 collapse 时双线必错位，因 separate 模式下各单元格双线独立渲染、无法对齐，且 double 要求四边等宽、禁用圆角与混搭样式。
直接结论：用 border-style: double + border-collapse: collapse 是唯一可靠方式；不设 border-collapse: collapse 的双线边框基本不可用。
为什么 border-style: double 总是看起来错位或消失？
常见错误现象是：每个 <td> 单独加了 <code>border: 3px double #000，但相邻单元格之间出现“断开”“重叠”“粗细不均”的双线——这不是 bug，是浏览器默认 border-collapse: separate 导致的必然结果。
原因很实在：double 边框由两条实线 + 中间等宽空白构成（总宽 = 3 × border-width），而 separate 模式下，每个单元格的双线各自渲染、互不协调。左右/上下边框不会对齐，视觉上就是乱码。
解决办法只有一条路：
- 必须在
<table> 元素上显式设置 <code>border-collapse: collapse -
border-width必须是明确像素值（如2px、3px），不能用thin/medium—— 这些关键字在部分浏览器中与double不兼容 - 不要试图用
border-top-style: double混搭其他边为solid——double要求四边统一宽度和样式，否则渲染可能退化为单线 -
border-radius和double天然冲突 —— 圆角处双线会断裂或渲染异常（Chrome 显示缺口，Firefox 可能拉伸变形），想加圆角就别用double - 不能和
box-shadow或伪元素“模拟双线”混用 —— 那种方案在高缩放比或打印时极易错位，且无法保证单元格边框对齐 - 颜色必须指定，
border-color缺失时部分旧浏览器可能完全不渲染double
border-style: double 的参数限制和视觉陷阱
双线不是“两条线随便叠”，它有严格几何规则：两条实线宽度相等，中间空白宽度也等于单线宽度。所以 border-width: 2px 实际占用 6px 空间（2 + 2 + 2）；3px 占用 9px。
这意味着：
示例（可用）：
| Name | Age |
如何让双线边框有“复古感”而不是廉价感？
纯黑双线容易显得生硬，所谓“复古感”其实是通过颜色、粗细、间距三者配合出来的质感：
- 避免用
#000—— 改用深灰（如#34495e）或带暖调的深棕（#5d4037），降低工业感 - 宽度选
2px或3px，1px太细看不出双线结构，4px以上易显笨重 - 搭配
padding至少8px，留出呼吸空间；font-family用无衬线体（如system-ui）反而更接近老式终端/报表气质 - 别加
background-color在<td> 上 —— 纯白底+双线才是经典档案表格味道；若非要背景色，选极浅灰（<code>#f9f9f9）并确保对比度足够真正难的不是写对那行
border: 3px double #34495e，而是意识到：双线边框一旦启用，就锁死了border-collapse模式、放弃了圆角、放弃了局部边框控制。它是个有脾气的样式，得按它的规矩来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
