border-radius对table无效是因border-collapse:collapse导致外边框不连续；最简方案是table加border-radius和overflow:hidden，并配outline+outline-offset实现圆角。
直接给 <table> 加 border-radius 基本无效——不是你漏写了，是浏览器规范决定的。 核心障碍是 border-collapse: collapse（几乎所有框架、CMS、Bootstrap 默认启用），它让表格失去独立外轮廓，border-radius 就没地方生效。
为什么 border-radius 在 <table> 上不显示？
常见现象：写了 border-radius: 8px，但四个角还是尖的；或者外层有圆角，内部单元格直角“顶出来”，破坏整体感。
-
border-collapse: collapse会强制合并单元格边框，<table>自身不再渲染连续外边框，圆角无作用对象 - 即使给
<table>加了border，只要<th>/<td>也有边框，它们的直角就会溢出圆角边界 -
border-radius对<table>的单个角（如border-bottom-left-radius）同样无效，必须作用于具体单元格
最简可靠方案：用 overflow: hidden + border-radius 套住整个表格
不改 HTML 结构，兼容现代浏览器，且保持 border-collapse: collapse 的整洁性。
- 给
<table>元素同时设置border-radius和overflow: hidden—— 后者才是关键，它裁掉超出圆角的单元格直角 - 必须确保
<table>有显式边框（border或outline），否则视觉上看不到圆角轮廓 - 推荐用
outline模拟外边框：outline: 2px solid #e0e0e0+outline-offset: -2px，避免与内部border-collapse冲突 - 单位优先用
em或rem，比如border-radius: 0.75em，响应式缩放更稳定；%在<table>上基本无效
只圆特定角？得操作 <th> 和 <td> 单元格
比如只要左上、右上两个角圆，其他保持直角，就必须放弃 collapse，切到 separate 模式再精准控制。
立即学习“前端免费学习笔记（深入）”；
- 先设
border-collapse: separate+border-spacing: 0，消除间隙但保留独立边框 - 顶部圆角：给
<th>第一个和最后一个子元素分别加border-top-left-radius和border-top-right-radius - 底部圆角：用
tr:last-child > td:first-child和tr:last-child > td:last-child定位左下、右下角 - 注意
colspan/rowspan会打乱选择器逻辑，需额外调整，比如加类名或用:nth-child()精确匹配
容易被忽略的细节
很多人试了 wrapper 方案却失败，往往卡在三个地方：没加 overflow: hidden、outline-offset 没配负值、或表格本身有 margin 撑出容器边界。尤其 outline-offset: -2px 必须等于 outline-width，差 1px 都会留白或溢出——这不是微调，是硬性匹配关系。
