HTML表格如何实现双线边框效果

border="2"不是双线边框，而是2px solid #000的单线加粗；真双线需border-style: double并满足三条件：border-width≥3px、显式border-color、border-collapse: collapse。

直接给 <table> 加 border="2" 不会得到双线边框，只会加粗单线；真双线必须用 border-style: double，但必须同时满足三个硬性条件：显式设置 border-width ≥ 3px、显式声明 border-color、且 <table> 上必须有 border-collapse: collapse。

为什么 border="2" 不是双线边框

HTML 的 border 属性是遗留写法，浏览器将其解释为 border: 2px solid #000，颜色不可改、不支持 double、还会干扰 CSS 样式。哪怕你同时写了 style="border: 2px double red"，border="2" 也可能覆盖或导致渲染不可预测。现代项目中应直接删掉它，用 CSS 控制。

删除方法很简单：table[border] { border: none; } 可全局重置所有带 border 属性的表格。

border-style: double 必须配 border-collapse: collapse

不设 border-collapse: collapse 时，表格默认是 separate 模式，每个 <td> 的双线边框独立绘制，左右/上下根本不对齐，看起来是错位、堆叠、粗细不均的“伪双线”，不是设计想要的效果。

正确做法是：

1. 在 <table> 元素上显式设置 border-collapse: collapse
2. <table>、<th>、<td> 都得写全 border 简写，例如 border: 3px double #34495e
3. 不能只给 <table> 加，否则内部格线消失；也不能只给 <td> 加，否则外框没双线

border-width 和 border-color 必须显式指定

border-style: double 渲染规则是：两条实线 + 中间等宽空白，总宽度 = 3 × 单线宽度。所以 1px double 实际占用 3px 空间，但视觉上常退化为单线；2px double 在高缩放比或旧浏览器下也不稳定。

推荐写法：

1. 用 3px double 起步（如 border: 3px double #34495e）
2. 宽度不能用 thin/medium，必须是明确像素值
3. border-color 必须写，border: 3px double 缺颜色会失效（尤其在旧浏览器）
4. 不要混用 border-radius——圆角会让双线断裂，Chrome 和 Firefox 表现不一致

内容紧贴边框？那是 padding 没加

border-style: double 本身不提供内边距，文字或内容会直接顶到双线边缘，这不是 bug，而是设计如此。容易被忽略的是：必须手动给 <th> 和 <td> 加 padding（比如 padding: 8px），才能让内容“呼吸”。漏掉这一步，复古感会变成压迫感。