html表格边框必须用css控制：设table{border-collapse:collapse}合并边框，table{border}设外框，th,td{border}设内框，仅用html的border属性不可靠且不支持样式定制。
border 属性不能可靠设置 HTML 表格的视觉边框——它在 HTML5 中已退化为语义标记，不是样式控制手段。直接写 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不会自动换行或隐藏列；小屏溢出需额外加table { display: block; overflow-x: auto; } - 虚线边框慎用
collapse：相邻td的虚线起始位置不同，拼合后易断裂；推荐改用border-spacing: 0配合separate，或用box-shadow: inset 0 -1px模拟
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
