HTML5中table的border属性仅作语义标记，不可靠控制边框样式；必须用CSS组合border-collapse: collapse、table边框和th/td边框三者才能实现可控单线边框。

table 标签的 border 属性不能可靠实现带边框的表格布局——它在 HTML5 中已退化为语义标记，不是样式控制手段。

---

border="1" 为什么有时看起来像有边框，但又不按预期工作？

• border="1" 在 HTML5 中仅表示“这是数据表，非布局用途”，浏览器据此启用默认 UA 样式（如 Chrome 渲染 1px 灰色实线，Firefox 可能只画外框、内框断开）；
• border="0" 是非法值，被忽略，等效于未设置（即 border=""），多数浏览器会隐藏所有单元格边框；
• border="2"、border="8" 等数值属于规范外的非法值，浏览器静默丢弃，不报错也不渲染加粗效果；
• 即使旧版 HTML4 支持像素值，各浏览器对“内边框是否随数值缩放”也无统一实现（多数只加粗外边框，内边框恒为 1px）。

---

为什么直接写 border 属性后边框“双线”或“错位”？

• 浏览器默认使用 border-collapse: separate，每个 th 和 td 都独立绘制边框；
• 相邻单元格的右边框 + 左边框 → 视觉上变成双线，中间还夹着默认 border-spacing: 2px 的空白缝；
• border 属性本身不触发 border-collapse，也不影响 border-spacing，所以它和“双线问题”完全无关，只是掩盖了真正问题。

---

正确设置表格边框必须用 CSS 组合三要素

• table { border-collapse: collapse; }：必须写在 table 元素上，否则无效；它废除 border-spacing，强制相邻边框合并；
• table { border: 1px solid #333; }：控制最外层边框（粗细、颜色、线型），可选但建议显式声明；
• th, td { border: 1px solid #333; }：控制每个单元格边框；若只设 table 而不设 th/td，内部将无边框。

示例：

<style>
table { border-collapse: collapse; border: 2px dashed #007BFF; }
th, td { border: 1px solid #dee2e6; padding: 8px; }
</style>

注意：table、th、td 的边框在角点交汇时，浏览器按“宽度优先”规则取舍（比如 2px 覆盖 1px），不会叠加。

---

真正容易被跳过的一步是：忘了给 table 设 width: 100% 或 min-width: fit-content。collapse 后若内容窄、父容器小，表格可能意外收缩，导致文字挤压、边框塌陷——这不是 border 的问题，而是布局没兜底。

立即学习“前端免费学习笔记（深入）”；