border属性不能可靠设置html表格视觉边框，仅具语义功能；真正可控的边框必须用css三要素：border-collapse: collapse、table border、th/td border，并注意布局兜底。
border 属性在现代 HTML 表格中**不能可靠设置视觉边框样式**——它已退化为语义标记，不是样式控制手段。直接写 border="1" 可能“看起来有边框”，但行为不可控、不一致，且完全无法定制颜色、线型或粗细。
为什么 border="1" 有时“有效”却不能当真用
浏览器把 border="1" 解释为“这是数据表，非布局用途”，然后启用各自的默认 UA 样式：Chrome 渲染 1px 灰色实线外框 + 断续内线，Firefox 可能只画外框，Safari 甚至省略部分内边框。这不是 bug，是规范允许的自由实现。
-
border="0"是非法值，被静默忽略，等效于未设置 -
border="2"、border="8"等数值属于 HTML5 规范外的无效值，浏览器丢弃，不报错也不渲染加粗效果 - 即使旧版 HTML4 支持像素值，各浏览器对“内边框是否随数值缩放”也无统一实现（多数只加粗外框，内框恒为 1px）
为什么边框看起来“双线”或“错位”
这和 border 属性完全无关。根本原因是浏览器默认使用 border-collapse: separate，每个 th 和 td 独立绘制边框，相邻单元格的右边框 + 左边框叠加，中间还夹着默认 border-spacing: 2px 的空白缝。
-
border="1"不触发border-collapse，也不影响border-spacing - 你看到的“双线”，其实是两个 1px 边框 + 2px 缝隙的视觉组合，不是
border属性造成的 - 想解决，必须用 CSS 控制，而不是调大
border数值
真正可控的边框必须用 CSS 三要素组合
仅靠 border 属性做不到统一、可维护、跨浏览器一致的边框效果。必须同时声明：
-
table { border-collapse: collapse; }—— 必须写在table上，否则无效；它废除border-spacing，强制相邻边框合并 -
table { border: 1px solid #333; }—— 控制最外层边框（颜色、线型、粗细），可选但建议显式声明 -
th, td { border: 1px solid #333; }—— 控制每个单元格边框；若只设table而不设th/td，内部将无边框
注意：三者边框宽度不一致时（比如 table 设 2px，th 设 1px），交界处按“宽者胜出”规则取舍，不会叠加。
容易被跳过的布局兜底步骤
border-collapse: collapse 解决的是“怎么画线”，不是“画多宽”。collapse 后若父容器窄或内容短，表格可能意外收缩，导致文字挤压、边框塌陷——这不是边框本身的问题，而是布局没兜底。
- 忘了给
table加width: 100%或min-width: fit-content，是常见疏漏 - 响应式场景下，
border-collapse不会自动适配视口，需配合媒体查询或max-width控制溢出 - 如果只依赖
border属性而没写 CSS，你在 Chrome 看起来正常，在 Safari 或打印预览里很可能边框消失或错乱
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
