必须将 border-collapse: collapse 写在 table 元素上，同时为 table、th、td 统一设置带单位、样式和颜色的 border（如 1px solid #ccc），否则边框无法合并；该属性与 border-spacing 互斥，合并时按宽度＞样式＞声明顺序优先级取胜出边框。
直接用 border + border-collapse: collapse 就能画出干净的实线边框，border="1" 这种写法不仅样式不可控，还会在单元格交界处产生双线、不响应响应式、无法设颜色——它只是浏览器兼容性兜底，不是正解。
为什么 table、th、td 都得写 border？
表格边框不是“画在 table 外围”就完事了。浏览器默认把 table、th、td 当成独立带边框的盒子：只给 table 加 border，你只能看到外框；内部单元格之间还是空白——因为 th 和 td 根本没边框。
- 必须同时设置：
table, th, td { border: 1px solid #ccc; } -
border-collapse: collapse只作用于table元素本身，但它依赖所有子元素（th/td）已有边框才能合并 - 漏掉
th或td的border，哪怕写了collapse，交界处依然断开或留白
border: 1px solid #000 里哪部分不能省？
border 是简写属性，三个值缺一不可：宽度（带单位）、样式、颜色。浏览器对缺失项的处理很严格——border-style 默认是 none，哪怕写了宽度和颜色，没声明 solid 就等于没边框。
- ✅ 正确：
border: 1px solid #000;、border: thin solid black; - ❌ 错误：
border: 1px #000;（缺样式）、border: solid #000;（缺宽度）、border: 1 solid #000;（1 没单位 → 等价于 0） - 单位必须显式写出：
1px、0.1em、2rem都行，但1就是无效值
border-collapse: collapse 必须加在 table 上
这个声明不写在 table 元素上，或者写在 th/td 上，都无效。它的作用是让相邻单元格的边框“吸在一起”，否则即使每个单元格都有 border，也会因默认的 border-spacing 出现间隙，视觉上像虚线或双线。
- ✅ 正确：
table { border-collapse: collapse; } - ❌ 错误：
th, td { border-collapse: collapse; }（语法错误）、table { border-collapse: separate; }（恢复默认，边框分离） - 如果用了
border="1"，还得额外重置：table[border] { border: none; }，否则 CSS 的border可能被忽略
真正容易被忽略的是：边框是否参与盒模型计算——box-sizing 默认是 content-box，意味着你设的 1px solid 会额外增加表格宽高；若需精确控制尺寸，得加 box-sizing: border-box。还有，border-radius 只对 table 外框生效，th/td 内部边框不会圆角，想实现圆角表格得配合 overflow: hidden。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
