border属性加数字只是加粗单线，非双线；实现真正双线须用css的border-style:double并配合border-collapse:collapse，且宽度建议≥3px。

table 的 border 属性加数字不等于双线

很多人试过写 <table border="2">，发现只是边框变粗了，不是两条平行线。这是因为 <code>border 是传统 HTML 属性，只控制“单一线条”的粗细和颜色，跟 CSS 里的「双线边框」（border-style: double）完全不是一回事。想实现真正双线效果，必须用 CSS。

用 border-style: double 才是标准解法

CSS 的 double 值会渲染出两条等宽、等距的平行实线，中间留白，这是 W3C 定义的合法边框样式。它对 <table>、<code><td>、<code><th> 都有效，但要注意作用对象： <ul><li>如果只给 <code><table> 加 <code>border: 3px double #000，只有外边框是双线，单元格之间还是默认分隔线

想让整个表格（含内部格线）都呈现双线感，得同时控制 border-collapse: collapse 和各单元格的 border

double 对宽度有隐含要求：太细（如 1px）可能渲染成单线，建议至少用 3px 起步

简单可靠写法：

A

B

避免 border-collapse: separate 下的错位双线

默认表格是 border-collapse: separate，此时每个 <td> 的双线边框会彼此独立绘制，左右/上下相邻单元格的双线不会对齐，看起来杂乱、间距不均。 <ul> <li>强制设 <code>border-collapse: collapse 是必要前提，否则双线只是“各自为政”

如果用了 separate 又想模拟双线，只能靠 box-shadow 或伪元素，但兼容性和维护性差很多

注意：IE8 及更早版本不支持 double，但现代项目基本不用考虑

单元格内容紧贴双线？调整 padding 就行

双线本身不增加内边距，内容会紧贴线条，视觉上显得拥挤。这不是 bug，是预期行为。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 给 <td> 或 <code><th> 单独加 <code>padding: 8px 最直接
• 别试图用 text-indent 或 margin 挤内容——margin 对表格单元格无效，text-indent 只影响首行文本
• 如果整表统一内边距，推荐写在 <table> 的 <code>style 里，再用后代选择器覆盖： table td { padding: 6px 10px; }

  双线边框的关键不在“怎么画线”，而在于“谁来画”和“怎么对齐”。漏掉 border-collapse: collapse 或误用传统 border 属性，是最常卡住的地方。

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