只对 table 元素设置 border 即可实现纯外边框效果，无需设置 td/th/tr 的 border、border-collapse 或 cellspacing；若需圆角，须配合 overflow: hidden。
只给 table 元素设 border 就够了
想让表格只显示外边框，最直接的办法就是：**只对 table 元素设置 border，完全不碰 td、th 或 tr**。浏览器默认不会给单元格自动加边框，所以只要你不主动加，内部就自然“无框”。
常见错误是顺手给 td 也写了 border，结果要么双线重叠，要么得额外用 border-collapse: collapse 去压，反而增加复杂度。
-
table { border: 1px solid #ccc; }—— 这一行就完成外框 - 确保没写类似
td { border: 1px solid #ccc; }这类规则 - 如果用了
border-collapse，反而可能让本该消失的内线“冒出来”，此时应删掉或设为separate
border-collapse: separate 是默认值，别乱改
很多人一看到“边框不统一”就下意识加 border-collapse: collapse，但这会强制合并所有边框——哪怕你只给 table 设了边框，它也可能把 td 的默认（其实是 0）边框也参与合并逻辑，导致意外渲染。
真正只显外框时，border-collapse 应保持默认（即 separate），不需要显式声明。
- 删掉所有
table { border-collapse: collapse; }这类语句 - 如果项目全局重置了
border-collapse（比如某些 CSS 框架），需单独为该表格覆盖：table.outer-only { border-collapse: separate; } -
border-spacing在separate模式下才生效，但对外框无影响，可忽略
避免 cellspacing="0" 干扰外框视觉
HTML 属性 cellspacing="0" 曾用于消除单元格间距，但它在现代 CSS 中已无必要，且和 border-collapse 冲突。若同时存在，可能让外框像素位置偏移或出现微小空隙。
纯 CSS 方案下，这个属性不仅多余，还可能掩盖真实问题。
- 彻底删除 HTML 中的
cellspacing和cellpadding属性 - 用
padding控制单元格内边距：td, th { padding: 8px; } - 若发现外框“虚”或断开，检查是否误用了
border-collapse: collapse+cellspacing="0"组合
需要响应式或圆角时，overflow: hidden 很关键
当给 table 加 border-radius（比如 border-radius: 4px）时，内部 td 的内容或默认边框可能溢出圆角区域，导致视觉上“破框”。
这不是边框没生效，而是子元素没被裁剪。
- 必须搭配
overflow: hidden：table { border-radius: 4px; overflow: hidden; } - 不要只设
border-radius不加overflow，尤其在移动端缩放后容易暴露问题 - 如果用了
border-collapse: collapse，border-radius会失效——这是浏览器限制，只能切回separate模式
border-collapse”或“顺手给 td 加了 border”这种细节上。真正干净的外框，往往就是最少的代码。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
