table设置border-radius无效，因默认border-collapse:collapse模式下浏览器忽略该属性；需改用separate模式、设overflow:hidden，并为对应th/td单元格（如tr:last-child td:first-child）添加圆角及显式边框。
table 设置 border-radius 为什么没效果
因为 table 元素默认的边框渲染机制不支持直接对整个表格应用 border-radius——浏览器会忽略它，除非你同时控制 border-collapse 和单元格边框行为。
- 默认
border-collapse: collapse时，border-radius对table本身无效，圆角只可能出现在最外层边框“视觉上”，但实际被内部单元格边框切断 - 改用
border-collapse: separate是前提，否则所有圆角尝试都白搭 - 必须给
table设置overflow: hidden，否则即使有圆角，溢出的单元格边框仍会露出来
实现圆角表格的最小可行写法
以下 CSS 能稳定生效，适用于现代浏览器（Chrome/Firefox/Safari ≥ 15）：
table {
border-collapse: separate;
border-spacing: 0;
border-radius: 8px;
overflow: hidden;
}
th, td {
border: 1px solid #ddd;
}
/* 仅给第一行和最后一行的单元格加顶部/底部圆角 */
th:first-child, td:first-child {
border-top-left-radius: 8px;
}
th:last-child, td:last-child {
border-top-right-radius: 8px;
}
tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}
注意：这里没用 table 的 border，而是靠 th/td 的边框拼合，再手动给四个角加圆角。这是目前最可控的方式。
用 border-collapse: collapse 硬要圆角？可以但得绕路
如果必须用 collapse（比如需要消除单元格间隙），就得放弃对 table 直接设 border-radius，转而包裹一层容器：
- 给
table外层加一个div，设border-radius和overflow: hidden -
table自身保持border-collapse: collapse，但需确保没有外边框溢出（例如避免border设在table上） - 这种方案下，圆角是容器裁剪出来的，不是表格原生支持的，所以当内容高度不均或有阴影时容易穿帮
移动端适配和 Safari 的坑
iOS Safari 对 border-radius + overflow: hidden 组合偶尔失效，尤其在缩放或滚动后。解决方法很具体：
- 给
table或其父容器加-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgo...)（极简透明 PNG）能强制重绘，但更轻量的是加transform: translateZ(0) - 避免在
th/td上用background-clip: padding-box，它在旧版 Safari 里会让圆角消失 - 如果表格带固定表头（
position: sticky），圆角只对可视区域生效，超出部分会被裁掉——这不是 bug，是overflow: hidden的预期行为
真正麻烦的不是怎么写，而是哪几处样式必须同时存在、缺一不可。少一个 border-spacing: 0 或漏掉 overflow: hidden，圆角就断在某个角上，还不好定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
