必须使用 border-style: double 并配合 border-collapse: collapse 才能实现真正的双线边框，单独设置 border 或忽略 collapse 会导致单线或错乱效果。
border-style: double 是唯一标准解法
想让表格边框真正呈现两条平行实线，必须用 border-style: double，而不是 border="2" 或 border: 2px solid。后者只是加粗单线，视觉上完全不是双线。
关键点在于：double 是 CSS 规范定义的独立边框样式，浏览器会自动渲染两条等宽、等距的实线，中间留白。它对 <table>、<code><th>、<code><td> 都有效，但宽度太小（如 <code>1px）时可能退化为单线，建议起始值设为 3px 或以上。
-
double不支持border-radius，圆角会截断双线效果 - IE8 及更早版本不支持，但现代项目基本无需兼容
- 不能和
border-image同时使用，会失效
border-collapse: collapse 必须提前设置
如果只给 <table> 或 <code><td> 加 <code>border: 3px double，但没设 border-collapse: collapse，结果往往是错位、重叠或“各自画线”的杂乱双线——因为默认是 border-collapse: separate 模式，每个单元格边框独立绘制，相邻边不会对齐。
正确顺序是：先设 border-collapse: collapse 在 <table> 上，再统一设双线边框。漏掉这一步，<code>double 就只是“看起来像双线的单线”，毫无一致性可言。
- 必须作用在
<table> 元素上，写在 <code><td> 里无效 <li> <code>border-spacing在collapse模式下被忽略，不用额外清空 - 若已用
border="1"，需先用table[border] { border: none; }覆盖，否则 CSS 可能被干扰 - 若只需外框双线、内线单线，就分开控制：
table { border: 3px double }+th, td { border: 1px solid } - 统一控制：
th, td { padding: 8px 12px; } - 若整表需要不同内边距，优先写在
<table> 上，再用后代选择器覆盖：<code>table td { padding: 6px 10px; } - 注意：双线边框的视觉厚度比单线大，
padding值建议比平时略增 2–4px，避免对比失衡
双线边框最常卡在两点：误以为
怎么让整张表（含内部格线）都是双线
只给 <table> 加 <code>border: 3px double，只能看到外框双线；内部单元格之间仍是默认分隔线。要让所有线条（外框 + 内线）都统一为双线，得把 border 同时应用到 <table>、<code><th>、<code><td> 三者，并确保它们宽度、颜色、样式完全一致。
<p>推荐写法：</p>
<pre class="brush:php;toolbar:false;">table,
th,
td {
border: 3px double #333;
}
table {
border-collapse: collapse;
}</pre>
<ul><li>不要只写 <code>table { border: ... }，否则 <th>/<code><td> 没边框，内部无分隔
<li>避免混用不同宽度，比如 <code>table { border: 3px double } + td { border: 1px solid }，交界处会突兀加粗
内容紧贴双线？padding 才是正解
双线边框本身不带内边距，文字会直接顶到线条上，显得拥挤。这不是 bug，是预期行为。别用 margin（对表格单元格无效）或 text-indent（只影响首行），直接给 <th> 和 <code><td> 加 <code>padding 最可靠。
border="2" 就是双线，以及忘了 border-collapse: collapse 这个前提。实际动手时，先写 collapse，再统一分配 double，最后调 padding——顺序错了，效果就全偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
