答案：table元素本身无法直接用border-radius实现圆角，需外层div包裹并设border-radius和overflow:hidden；若用border-collapse:collapse，还需为首尾行th/td单独设置圆角；改用separate则需配合border-spacing:0。
table 元素本身不能直接用 border-radius 圆角
因为 table 是个「包裹型」元素，border-radius 在大多数浏览器里对它无效（尤其当 border-collapse: collapse 时）。真正起作用的是它的父容器或内部结构——最可靠的做法是给 table 外层套一层 <div>，再对这个 <div> 设置圆角和溢出隐藏。
- 别直接写
table { border-radius: 8px; overflow: hidden; }—— 这在 Chrome/Firefox 中多数情况不生效 - 必须用外层
<div class="table-wrapper">包裹，然后对这个div应用border-radius和overflow: hidden - 如果用了
border-collapse: collapse，还要额外处理第一行/最后一行的th/td圆角，否则边框会“漏出来”
如何让 collapsed 表格的角真正圆起来
当 table 设置了 border-collapse: collapse，所有单元格边框合并成一条线，此时仅靠外层 div 的 border-radius 不够，顶部左/右、底部左/右四个角仍可能露出直角边框。需要配合 th 和 td 的单独圆角控制：
- 给第一行的
th:first-child和th:last-child加border-top-left-radius和border-top-right-radius - 给最后一行的
td:first-child和td:last-child加border-bottom-left-radius和border-bottom-right-radius - 注意：这些样式只在
border-collapse: separate下 100% 可靠；若坚持用collapse，需确保没有border-spacing干扰
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>姓名</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>北京</td>
</tr>
</tbody>
</table>
</div>
.table-wrapper {
border-radius: 8px;
overflow: hidden;
border: 1px solid #ddd;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px 12px;
border: 1px solid #eee;
}
th:first-child { border-top-left-radius: 8px; }
th:last-child { border-top-right-radius: 8px; }
td:first-child { border-bottom-left-radius: 8px; }
td:last-child { border-bottom-right-radius: 8px; }
用 border-collapse: separate 更省事但有间距问题
如果不用 collapse，改用 separate，就能直接对 table 自身加 border-radius，且无需手动处理每个角——但默认会产生 border-spacing（即单元格间隙），这会让圆角“断开”。解决方法很明确：
- 设
border-spacing: 0消除间隙 - 给
table加border-radius和overflow: hidden - 确保
th/td的border不超出表格边界（比如用border: 1px solid #ccc而非outline）
这种方案兼容性更好，也更符合直觉，只是要注意：某些旧版 Safari 对 border-spacing: 0 + border-radius 组合支持不稳定，建议加 -webkit-border-radius 前缀（虽现代已基本不用）。
立即学习“前端免费学习笔记（深入）”；
圆角表格在响应式或滚动场景下的坑
当表格内容宽、需要横向滚动时，overflow-x: auto 很容易破坏圆角效果——滚动条会撑开外层容器，导致 border-radius 失效或出现白边。常见错误是只给 .table-wrapper 加 overflow-x: auto，却忘了限制其高度或宽度。
- 正确做法：把
overflow-x: auto加在.table-wrapper上，并设max-width: 100%（不是width: 100%） - 如果同时要纵向滚动，
max-height必须配合overflow-y: auto，且要预留表头固定空间（否则圆角会被截断） - 移动端 Safari 有个经典 bug：滚动时
border-radius临时失效，可用transform: translateZ(0)强制硬件加速修复
border-collapse 模式、不同滚动需求、不同浏览器对 overflow 和 border-radius 的合成渲染逻辑——稍不注意，圆角就只出现在截图里，不出现在真机上。 
