双线边框必须用css的border-style:double而非html的border="2"；需显式设置border-width（建议≥3px）、颜色，并配合border-collapse:collapse作用于table元素，才能使外框与单元格边框均呈现清晰对齐的双线效果。

双线边框必须用 border-style: double，不是 border="2"

很多人写 <table border="2">，结果只是边框变粗，根本不是两条平行线。HTML 的 <code>border 属性只控制单线粗细和颜色，跟 CSS 的 double 完全无关。真正实现双线，必须靠 CSS 的 border-style: double —— 这是 W3C 标准定义的合法样式，渲染出两条等宽实线 + 中间等宽空白。

常见错误现象：<table border="3"> 在 Chrome 里看起来像加粗单线；<code>border-width: 3px 却没写 border-style，结果边框直接不显示（因为默认是 none）。

• double 要求显式设置 border-width，建议 ≥ 2px；1px 在多数浏览器里会退化成单线
• 颜色不能省略，哪怕用黑色也得写 #000 或 black
• 只给 <table> 加 <code>double，内部单元格还是默认分隔线，得同步设到 <td> 和 <code><th> <h3> <code>border-collapse: collapse 是双线整齐对齐的前提

  如果表格保持默认的 border-collapse: separate，每个 <td> 的 <code>double 边框会各自绘制，左右/上下相邻单元格的双线无法对齐，看起来错位、杂乱、间距不均。

  强制设 border-collapse: collapse 后，相邻边框才会合并计算，让双线在视觉上真正“连贯”。这不是可选项，是必要条件。

  • 必须作用在 <table> 元素上，写在 <code><td> 上无效 <li>一旦用了 <code>collapse，border-spacing 就失效了，别再试图调它来“微调双线间距”
  • 如果设计需要圆角 + 双线，border-radius 和 double 共存时容易断裂，此时应换思路：用 box-shadow 模拟外线，border 画内线

  怎么让整个表格（含内部格线）都呈现双线效果

  只给 <table> 加 <code>border: 3px double #333，只能看到外框双线；要让每条格线都是双线，得把 double 同时应用到 <th> 和 <code><td>，并统一控制边框模型。 <p>最简可靠写法：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a> <p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p> </div> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;"></pre> <table style="border-collapse: collapse;"><tr> <td style="border: 3px double #333;">A</td> <td style="border: 3px double #333;">B</td> </tr></table> <ul> <li>宽度建议用 3px 起步，2px 在部分缩放比例下仍可能糊成单线</li> <li>不要只设 <code>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 别漏掉——漏掉任意一个，双线就只是“看起来像”，而不是“真的对齐且可控”。

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