只给table加border不行是因为浏览器默认border-collapse: separate，td/th自带隐式边框，必须显式设td,th{border:none}并启用border-collapse: collapse才能实现纯外边框。
只给table加border为什么还不行
因为浏览器默认用 border-collapse: separate 模型，td 和 th 自带隐式边框或受重置样式影响，哪怕你没写，也可能被 normalize.css 或浏览器默认样式塞进 1px solid #ddd。结果就是：你看到的“外边框”其实是 table 的 border 被内部单元格边框顶开、错位、甚至遮盖。
- 必须显式写
td, th { border: none; }，不能依赖“没写=没有” -
border-collapse: collapse是硬性前提——它让table的 border 真正成为“包裹整个表格的外框”，否则只是个松散容器 - 别用 HTML 的
border="1"属性，它会强制所有单元格带边框，和目标冲突 - 检查父容器是否有
overflow: hidden且table贴边，此时外边框可能被裁掉
一行代码验证是否真只有外边框
打开控制台，贴这句：
getComputedStyle(document.querySelector('table')).border
如果返回不是类似 "1px solid rgb(0, 0, 0)"，说明 table 的 border 没生效；再查：
getComputedStyle(document.querySelector('td')).border
如果不是 "none"，说明单元格边框还在漏出来——这就是绝大多数人卡住的地方。
常见隐形坑：border-style: hidden 和 box-sizing
border-style: hidden 看似是“隐藏”，但它在层叠中优先级高于 solid，一旦某处（比如 th）写了它，整条边就静默消失，连 border-width 都不认。DevTools 的 computed 样式里看最终值最准。
-
box-sizing: content-box（默认）会让 border 加在内容宽高之外，导致表格实际尺寸变大、布局偏移——建议统一加box-sizing: border-box - 用了
border-radius又启用了border-collapse: collapse？圆角可能被截断，尤其当border-radius > border-width * 2 - 某些 UI 框架（如 Ant Design、Element Plus）的表格组件自带内边框样式，需用更高优先级选择器覆盖，比如
table.my-table td, table.my-table th { border: none !important; }
想局部加线？collapse 下也能做
border-collapse: collapse 不等于“完全锁死”。你想最后一行加底边、第一列加左边，完全可行：
- 最后一行底边：
tr:last-child td { border-bottom: 1px solid #000; } - 第一列左边：
td:first-child, th:first-child { border-left: 1px solid #000; } - 注意：
:first-child比:nth-child(1)更稳，避免colspan导致错位 - 如果表格有
<colgroup></colgroup>，给<col>设border-left更高效，但前提是border-collapse: collapse已启用
真正容易被忽略的，是那个显式声明的 td, th { border: none; }——它不是锦上添花，而是必要条件。很多人反复调 table 的 border，却忘了清理单元格本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
