直接给<table>加border-radius无效，因border-collapse: collapse会禁用该属性；可靠方案是改用border-collapse: separate并为单元格角点设圆角，或用outline模拟外轮廓。
直接给 <table> 加 border-radius 大概率没用——不是你写错了，是浏览器本来就不渲染它。 根本原因在于表格的边框模型：只要用了 border-collapse: collapse（现代框架、生成器、Bootstrap 默认都开），border-radius 就会被忽略。得绕过这个限制，而不是硬刚。
为什么 border-radius 在 <table> 上不生效
表格的“边框”其实分散在 <th> 和 <td> 上，<table> 本身没有独立可圆角的外轮廓；而 border-collapse: collapse 更会让所有单元格边框合并成一条线，彻底剥夺 border-radius 的作用对象。这不是 bug，是规范行为。
常见错误现象：
– 写了 table { border-radius: 8px; overflow: hidden; }，但四个角还是直的
– 表格内容被裁掉一部分，但边角依然锋利
– 检查 computed styles 发现 border-radius 值存在，但视觉无变化
- 别指望靠改
display: block或加inline-block让它突然生效——<table>是替换元素，display 类型不影响此限制 - 不要只加
overflow: hidden而不处理边框模型，那只会把内容切掉，角还是直的 - 旧版 Safari 对
border-radius+table的支持极差，哪怕用了 workaround 也建议降级兜底
两种可靠方案：用 outline 模拟外轮廓 or 改用 separate 模式
不用重写 HTML，纯 CSS 可解。选哪种取决于你能否控制表格的 border-collapse 值：
立即学习“前端免费学习笔记（深入）”；
- 如果能改（比如自己写的表格或可控组件）→ 推荐
border-collapse: separate+ 单元格角点圆角 - 如果不能改（比如 CMS 输出、第三方库生成、内联样式锁定）→ 必须用
outline+outline-offset替代外边框
第一种方案示例（separate 模式）：
table {
border-collapse: separate;
border-spacing: 0;
}
th:first-child { border-top-left-radius: 6px; }
th:last-child { border-top-right-radius: 6px; }
tr:last-child > td:first-child { border-bottom-left-radius: 6px; }
tr:last-child > td:last-child { border-bottom-right-radius: 6px; }
第二种方案示例（outline 模拟）：
.tg {
border-collapse: collapse;
border-radius: 6px;
overflow: hidden;
outline: 2px solid #ddd;
outline-offset: -2px;
}
注意：outline 不参与布局，不会撑开容器，也不会被 collapse 干扰，这是它比 border 唯一且关键的优势。
border-radius 数值怎么设才合理
别盲目套用 4px 或 8px。表格圆角大小要匹配字体缩放和行高：
- 推荐用
em单位，如border-radius: 0.5em，随字号自动缩放 - 像素值（如
6px）适合固定设计系统，但小屏下可能显得生硬 - 避免
50%——表格宽高几乎从不相等，结果一定是椭圆角，且不可控 - 如果表格有纵向滚动条，圆角会和滚动条交界处露白，此时建议加
overflow: hidden外层 wrapper，而非仅作用于<table>
另外，border-radius 的四个角可以单独控制，但表格场景下极少需要差异化处理左上/右下——统一用 border-top-left-radius 这类独立属性，比写 border-radius: 6px 6px 0 0 更清晰、更易维护。
真正容易被忽略的点是：圆角是否在所有分辨率、所有缩放比例、所有滚动状态下都保持完整。光在桌面 Chrome 里看着圆了，不等于它在 iOS Safari 缩放 150% 时还圆——得实机测，尤其关注右下角和滚动边界。
