table直接加border-radius无效，因为border-collapse:collapse使table无独立外边框轮廓，圆角失去作用对象；正确解法是外层div包裹并设border-radius+overflow:hidden裁剪，或用outline模拟外轮廓。
table 直接加 border-radius 为什么没效果
因为浏览器对 table 的渲染机制特殊：只要用了 border-collapse: collapse（绝大多数 CMS、框架、模板默认启用），border-radius 就被规范明确忽略——不是写错了，是它根本没地方生效。此时边框属于单元格（th/td），table 自身没有连续外轮廓，圆角无从附着。
常见错误现象：.my-table { border-radius: 8px; } 写了但四个角还是尖的；或者外层有圆角，但内部单元格直角“顶破”边缘，露出锯齿。
- 检查开发者工具中
table的 computedborder，如果显示为none或极小值，说明边框实际来自th/td - 不要只给
table加border-radius就收工，必须配合裁剪或轮廓重定向 -
border-collapse: separate虽能部分生效，但会导致双线边框、border-spacing错位，不推荐用于生产环境
用 wrapper + overflow: hidden 实现最简可靠方案
不改 HTML 结构、不碰 border-collapse，靠外层容器“硬裁”出圆角，兼容性好、代码轻量、适配现代浏览器（Chrome/Firefox/Safari iOS 14+）。
核心就三步：
- 套一层
...
-
.table-wrapper设border-radius和overflow: hidden - 若需外边框，用
outline（非border）避免与collapse冲突
示例 CSS：
.table-wrapper {
border-radius: 0.75em;
overflow: hidden;
outline: 2px solid #e0e0e0;
outline-offset: -2px;
}
.my-table {
border-collapse: collapse;
width: 100%;
}
注意：overflow: hidden 是关键，它裁掉单元格直角溢出部分；outline-offset 必须为负值且绝对值等于 outline-width，否则会留白或外溢。
想只圆某一个角（比如左下角）怎么办
border-bottom-left-radius 不能直接作用于 table 元素，必须落到具体单元格——即最后一行、第一列的那个 td 或 th。
前提条件很严格：
- 表格必须设
border-collapse: separate - 目标单元格要有显式
border（比如border: 2px solid #333） - 选择器要精准：例如
table tr:last-child td:first-child
但这种写法对 colspan/rowspan 敏感，稍有合并单元格就失效；响应式缩放时圆角尺寸易失衡。更稳妥的做法仍是用 wrapper 容器单独设 border-bottom-left-radius 并 overflow: hidden。
容易被忽略的细节和边界情况
圆角看着简单，实操里几个点一踩就崩：
- 如果
table嵌在flex或grid容器里，且父元素没设宽高或min-width，overflow: hidden可能被忽略 - 表格内容超宽触发横向滚动时，
overflow: hidden会把滚动条一起干掉——这时得换方案，比如用 wrapper +overflow-x: auto - IE 和旧版 Safari 对
outline-offset支持极差，如需兼容，退回纯 wrapper 方案（不用outline） - 单位建议用
em或rem，%在table上基本无效，px在缩放场景下易失比例
别指望靠 th/td 单独加圆角拼出整体效果——视觉上永远不统一，维护成本高，还容易被后续数据变动破坏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
