最简方案是：给table设border，加border-collapse: collapse，并显式设置td, th { border: none; }；否则默认间距和单元格边框会导致外边框显示异常。
直接给 table 加 border 就够了，但得关掉默认边框干扰
只显示外边框，最简方案就是：用 CSS 给 table 元素设 border，同时确保 td 和 th 没有边框、没有间距。很多人卡在“明明写了 border，却看到一堆细线”，问题几乎都出在没清理默认行为。
-
border-collapse: collapse必须加上——否则cellspacing（旧属性）或border-spacing（CSS）会撑开单元格间隙，让外边框看起来“虚”或“断开” -
td, th { border: none; }要显式写，不能靠“没写就等于没有”——某些浏览器或重置样式表会默认给单元格加边框 - 别用 HTML 的
border="1"属性，它会强制所有单元格带边框，和“只外圈”目标冲突
border-collapse: collapse 和 separate 到底选哪个？
答案是：要外边框干净，优先用 collapse；但如果你后续要局部加边框（比如某列右边线），就得切回 separate 或换思路。
-
collapse下，table的border是真正“外框”，td边框会被合并或忽略，适合纯外边框场景 -
separate（默认）下，table的border是包裹整个表格的“容器框”，但td之间仍有独立边框和间距，容易漏线或双线 - 如果用了
collapse又想局部加线（比如最后一行底边），得配合tr:last-child td { border-bottom: 1px solid #000; }，此时border-collapse不影响单侧边框生效
为什么加了 border 还看不见？常见隐形坑
不是代码没写，而是被其他规则盖掉了。几个高频原因：
-
table父容器有overflow: hidden，且外边框刚好贴边被裁掉——加个padding或调小border-width就露出来 - CSS 重置库（如 normalize.css）把
td的border设成了1px solid #ddd，你没覆盖它——必须显式写td, th { border: none; } - 用了
border-style: hidden在某个地方（比如th），它优先级高于solid，会“吃掉”整条边——查 DevTools 的 computed 样式，看最终生效的是哪条 -
box-sizing是content-box（默认），而border加在内容宽高之外，导致表格实际尺寸变大、布局错位——建议统一加box-sizing: border-box
一行代码快速验证是否真只有外边框
贴进控制台执行，能立刻暴露问题：
立即学习“前端免费学习笔记（深入）”；
getComputedStyle(document.querySelector('table')).border
如果返回值不是类似 "1px solid rgb(0, 0, 0)"，说明 table 的 border 没生效；再查 getComputedStyle(document.querySelector('td')).border，如果不是 "none"，说明单元格边框还在漏出来。
真正干净的外边框，只依赖三件事：一个 table 的 border、一个 border-collapse: collapse、一组 td, th { border: none; }。其余都是干扰项，删掉或覆盖掉就行。
