table直接加border-radius表头不圆，因thead是语义容器无独立渲染边框，且border-collapse: collapse下圆角无效；稳妥方案是改用separate模式并为th设置圆角，或用overflow:hidden+outline模拟，需注意兼容性与响应式单位。
table直接加border-radius为什么表头不圆
因为表头（thead）本身不是独立渲染块，它没有自己的外边框轮廓；浏览器把圆角计算逻辑绑定在table或th上，而thead只是语义容器。即使你给thead设了border-radius，只要border-collapse: collapse存在，它就完全无效——不是样式没生效，是根本没地方画。
只让表头两个角变圆的稳妥写法
必须放弃collapse模式，改用separate，再把圆角精准“分配”到th元素上：
-
table设border-collapse: separate和border-spacing: 0 -
thead th:first-child加border-top-left-radius: 8px -
thead th:last-child加border-top-right-radius: 8px - 如果
th有border，确保它和td的边框颜色/宽度一致，否则视觉会断层
注意：colspan会影响:first-child/:last-child匹配，有合并表头时得用nth-of-type(1)或类名定位。
保持collapse模式下“假装”表头圆角
当无法改border-collapse（比如框架生成的表格），就用overflow: hidden + outline在table上硬裁：
- 给
table加border-radius: 8px和overflow: hidden - 用
outline模拟外边框：outline: 2px solid #4a90e2+outline-offset: -2px -
thead内部th背景色若溢出（尤其旧版 Safari），补一句background-clip: padding-box
这个方案不改 HTML，但outline在 Windows 高对比度模式下可能消失，如需强保障，得在外层套div并把圆角和阴影都挪过去。
容易被忽略的细节：圆角单位与响应式
用px写死border-radius在高缩放或大字体系统下会显得僵硬；推荐用em或rem：
-
border-radius: 0.5em随字号缩放，适配系统设置 - 避免
%值——表格宽高不固定，5%在窄屏下几乎看不见，在宽屏下又过大 - 移动端 Safari（≤ iOS 15.4）对
overflow: hidden裁剪thead背景支持弱，加-webkit-mask兜底更稳
真正卡住人的从来不是“怎么写”，而是没意识到thead不能独立承载圆角——它只是个壳，圆角必须落在能画边框的地方：要么th，要么table自身（配合裁剪），要么外层容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
