双线边框必须用CSS的border-style:double而非HTML的border="2"；需显式设置border-width（建议≥3px）、颜色，并配合border-collapse:collapse作用于table元素，才能使外框与单元格边框均呈现清晰对齐的双线效果。
双线边框必须用 border-style: double，不是 border="2"
很多人写 <table border="2">，结果只是边框变粗，根本不是两条平行线。HTML 的 border 属性只控制单线粗细和颜色，跟 CSS 的 double 完全无关。真正实现双线，必须靠 CSS 的 border-style: double —— 这是 W3C 标准定义的合法样式，渲染出两条等宽实线 + 中间等宽空白。
常见错误现象：<table border="3"> 在 Chrome 里看起来像加粗单线；border-width: 3px 却没写 border-style，结果边框直接不显示（因为默认是 none）。
-
double要求显式设置border-width，建议 ≥ 2px；1px 在多数浏览器里会退化成单线 - 颜色不能省略，哪怕用黑色也得写
#000或black - 只给
<table>加double，内部单元格还是默认分隔线，得同步设到<td>和<th>
border-collapse: collapse 是双线整齐对齐的前提
如果表格保持默认的 border-collapse: separate，每个 <td> 的 double 边框会各自绘制，左右/上下相邻单元格的双线无法对齐，看起来错位、杂乱、间距不均。
强制设 border-collapse: collapse 后，相邻边框才会合并计算，让双线在视觉上真正“连贯”。这不是可选项，是必要条件。
立即学习“前端免费学习笔记（深入）”；
- 必须作用在
<table>元素上，写在<td>上无效 - 一旦用了
collapse，border-spacing就失效了，别再试图调它来“微调双线间距” - 如果设计需要圆角 + 双线，
border-radius和double共存时容易断裂，此时应换思路：用box-shadow模拟外线，border画内线
怎么让整个表格（含内部格线）都呈现双线效果
只给 <table> 加 border: 3px double #333，只能看到外框双线；要让每条格线都是双线，得把 double 同时应用到 <th> 和 <td>，并统一控制边框模型。
最简可靠写法：
<table style="border-collapse: collapse;">
<tr>
<td style="border: 3px double #333;">A</td>
<td style="border: 3px double #333;">B</td>
</tr>
</table>
- 宽度建议用 3px 起步，2px 在部分缩放比例下仍可能糊成单线
- 不要只设
border-top或border-left等单边，double不支持单边独立生效（除非显式写border-top-style: double并配border-top-width） - IE8 及更早版本不支持
double，但现代项目基本不用考虑兼容性问题
为什么不用 outline 或伪元素模拟双线
有人试过用 outline: 2px double 或 ::before 画第二条线，实际问题一堆：outline 不占布局空间、无法单独控制上下左右、多数浏览器根本不支持 outline-style: double；伪元素增加 DOM 复杂度，还会影响焦点逻辑和屏幕阅读器行为。
真正稳定可靠的双线边框，只有 border-style: double 这一条路。关键就三点：宽度够、颜色明、border-collapse: collapse 别漏掉——漏掉任意一个，双线就只是“看起来像”，而不是“真的对齐且可控”。
