table直接加border-radius边角仍为直角，是因为默认border-collapse: separate导致单元格独立边框的直角穿透圆角边界，必须配合overflow: hidden裁剪溢出部分，并使用border-collapse: collapse合并边框才能实现整体圆角效果。
table 直接加 border-radius 为什么边角还是直的
因为 table 默认是 border-collapse: separate，单元格各自有独立边框，border-radius 只作用在表格外框，但内部 th/td 的直角会“顶破”圆角边界。你看到的不是没生效，而是被撑出来了。
必须配合 overflow: hidden 裁剪溢出部分，否则圆角只是“画了个弧线”，底下尖角全露在外面。
- 只设
border-radius→ 圆角框存在，但被单元格直角穿透 - 不设
overflow: hidden→ 即使加了圆角，右下角等位置仍可能显示尖角 - 用
border-collapse: collapse是推荐做法，它让边框合并成一条线，避免双线错位，视觉更干净
border-collapse: collapse 和 separate 对圆角的影响
border-collapse: collapse 是实现整洁圆角的关键前提。它把相邻单元格的边框“吸”到一起，让整个表格像一个整体容器；而 separate 下每个单元格都自带边框和 padding，它们的直角无法被父级 border-radius 统一约束。
注意：用 collapse 后，border-spacing 失效，所以别再设它——否则圆角会断开。
- ✅ 推荐：
border-collapse: collapse+border-radius+overflow: hidden - ❌ 避免：
border-collapse: separate+border-radius（除非外层套div并设overflow: hidden） - ⚠️ 若必须保留间隔（如斑马纹间隙），改用
padding和背景色模拟，而非border-spacing
要不要给 table 外层包一层 div
可以，但没必要——现代浏览器（Chrome 90+、Firefox 85+、Safari 15.4+）对 table 元素直接支持 border-radius + overflow: hidden。加 wrapper 反而多一层 DOM，还可能引入额外 margin/padding 意外。
唯一需要 wrapper 的场景：你想让圆角范围包含表头阴影、或需兼容极老 Safari（≤ iOS 12），此时用 <div class="table-wrapper"><table>...</table></div> 并给 wrapper 设 border-radius 和 overflow: hidden 更稳妥。
- 现代项目：直接操作
table标签，简洁高效 - 要兼容 IE 或旧版 iOS Safari：wrapper 是保险方案
- 别忘了给
th和td设border: 1px solid #e0e0e0，否则collapse后边框可能消失
圆角值写 px 还是 50%？怎么选
表格不是头像，一般不用 border-radius: 50%。50% 在宽高不等的表格上会生成椭圆角，且容易因内容撑高导致底部圆角被截断——尤其有 tfoot 或长文本时。
推荐用固定像素值，比如 8px 或 12px，既可控又符合 UI 系统规范。如果要响应式，可用 clamp(6px, 1vw, 12px)，但注意低版本 Safari 不支持 clamp，得 fallback。
- ✅ 常规卡片型表格：
border-radius: 8px - ❌ 不要：
border-radius: 50%（除非你真想要胶囊形顶部+椭圆底角） - ? 小技巧：第一行
th和最后一行td可单独加大圆角，比如border-top-left-radius: 12px，强化视觉层次
overflow: hidden。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
