table 元素直接加 border-radius 无效，因 border-collapse: collapse 时规范禁止圆角；可靠方案是外层 div 设置 border-radius 和 overflow: hidden，并用 outline 模拟边框。
table 元素直接加 border-radius 为什么没效果？
因为浏览器对 <table> 的渲染逻辑特殊：当 border-collapse: collapse（绝大多数框架、生成器默认启用）时，border-radius 被完全忽略——不是 bug，是规范行为。单元格边框被“合并”成一条线，没有独立角可圆。
常见错误是只写：.my-table { border-radius: 8px; }，却没处理裁剪和外轮廓，结果圆角不可见。
- 别指望靠
th或td单独加border-radius来拼出整体圆角——内部单元格直角会顶破边缘 -
border-collapse: separate虽能部分生效，但会导致双线边框、间距错乱，不推荐用于生产环境 - IE 和旧版 Safari 对
table的border-radius支持极差，必须用兼容方案
用 overflow: hidden + 外层容器实现最简可靠方案
不改 HTML 结构，只需套一层 <div class="table-wrapper">，把圆角和裁剪逻辑交给它：
.table-wrapper {
border-radius: 0.75em;
overflow: hidden;
/* 可选：加 outline 模拟外边框，避免与内部 border 冲突 */
outline: 2px solid #e0e0e0;
outline-offset: -2px;
}
<p>.my-table {
width: 100%;
border-collapse: collapse;
/<em> 不要在这里设 border-radius </em>/
}-
overflow: hidden是关键，它裁掉表格内容超出圆角的部分，否则直角单元格会“露头” - 外层
div承担视觉圆角，table只负责数据结构，职责分离更稳定 - 如果已有现成 class（比如 CMS 输出的
.tg），直接给它加border-radius和overflow: hidden即可，无需额外包裹
outline 替代 border 解决 collapse 冲突
想让圆角有明确外边框，又不想破坏 border-collapse: collapse 的整洁性？用 outline：
立即学习“前端免费学习笔记（深入）”；
-
outline不参与盒模型，不受border-collapse影响，位置精准 - 配合
outline-offset: -Xpx向内偏移，紧贴表格边缘，视觉上就是“带圆角的边框” - 避免用
border+padding模拟，那样会撑大尺寸、干扰对齐 - 注意：
outline在 Firefox 中默认会随焦点显示（如键盘 tab 进入），如需禁用可加outline: none但仅限交互元素，静态表格建议保留
响应式圆角和像素 vs 百分比怎么选？
border-radius 值不是越大越好看，得看场景：
- 固定尺寸表格（如后台管理列表）用
px或em：推荐4px～12px，0.5em～1em更适配字体缩放 - 百分比值（如
5%或10%）适合宽度动态变化的表格，但要注意：垂直方向半径按 height 计算，宽高差异大会导致左右/上下圆角不一致 - 别用
999px或50%—— 表格不是正方形，50%会拉出极端椭圆角，难控制 - 真要响应式，建议 JS 动态计算：监听
resize，取table.offsetWidth * 0.03作为 radius，再注入 style
最易被忽略的是：圆角在小屏上容易被误认为“切角”，尤其当表格内容密集时。建议在移动端把 border-radius 降到 4px 或关闭，优先保证可读性。
