table加border-radius无效，因默认或collapse模式下无独立外边框轮廓；可靠方案是外层div容器套表并设border-radius+overflow:hidden，兼容性最佳。
table 元素加 border-radius 为什么没反应
不是你写错了，是浏览器根本没打算让它生效——table 在默认或 border-collapse: collapse 模式下，没有独立的“外边框轮廓”，border-radius 找不到作用对象。即使写了 overflow: hidden，旧版 Chrome/Safari 可能偶现效果，但不可靠，别赌。
给 th 和 td 单独设 border-radius 的坑
直接给所有单元格加 border-radius: 8px 会导致边框断裂、圆角错位，尤其在 border-collapse: collapse 下，相邻边框被合并，圆角只出现在局部角落，视觉上不连贯。
- 只对首行
th:first-child和th:last-child设顶部圆角 - 只对末行
td:first-child和td:last-child设底部圆角 - 必须配合
border-collapse: separate+border-spacing: 0，否则单元格间有白缝 - 如果用了
<thead>/<code><tbody>，别对它们设 <code>border-radius——它们不是渲染容器，不响应圆角用
outline模拟带圆角的外边框当表格必须保持
border-collapse: collapse（比如第三方组件生成的表格），又想绕过渲染限制时，outline是最轻量的解法：它不参与盒模型，不受 collapse 影响，还能用outline-offset精准贴合边缘。-
outline: 2px solid #e0e0e0替代原border -
outline-offset: -2px把 outline 向内拉，避免额外留白 - 必须保留
border-radius和overflow: hidden，否则 outline 不会圆 - 注意：
outline不支持border-radius分角控制（如左上/右下不同），只能整体圆
最稳的方案：套一层
div容器不碰表格内部结构，兼容性最好，适合要加阴影、hover、响应式缩放的场景——所有圆角、裁剪、装饰都交给外层
div，table保持原样。立即学习“前端免费学习笔记（深入）”；
<div class="table-wrapper"><table>...</table></div>.table-wrapper { border-radius: 12px; overflow: hidden; }- 内部
table无需改border-collapse，也不用动th/td边框 - 若需表头悬浮阴影，直接给
.table-wrapper加box-shadow，不影响表格语义
真正麻烦的不是怎么圆，而是得先判断：你能不能动表格结构？能不能改
border-collapse？要不要支持 IE11？这些决定了该选哪条路——而多数真实项目里，div套表才是上线前最后一刻还在用的那一个。 -
