table直接加border-radius无效，因默认border-collapse:collapse使表格无独立外边框轮廓，且单元格直角会顶破圆角；需改用separate模式分配圆角至首尾单元格，或配合overflow:hidden+table边框裁剪实现。
table 直接加 border-radius 为什么没反应
因为大多数表格默认用了 border-collapse: collapse，这时候浏览器把所有单元格边框“合并”成一条线，table 元素本身不再有独立的外边框轮廓，border-radius 就失去了作用对象——不是写错了，是它根本没地方生效。
另外，即使你手动给 table 加了 border，只要 th 或 td 自己也有边框（比如通过 border: 1px solid），这些单元格的直角就会直接顶破表格的圆角边界，视觉上还是方的。
- 检查开发者工具里
table元素的 computed styles，如果border显示为none或数值极小，说明边框实际来自单元格 - 不要只看 HTML 里有没有写
border，要确认最终渲染时哪一层真正画出了边框 -
border-radius对table生效的前提：它得有可渲染的、连续的外边框，且不被内部单元格边框打断
用 overflow: hidden + border-radius 最简方案
如果你能接受表格保持 border-collapse: collapse（比如从后端模板或框架生成的表格），最轻量的做法是：不碰 HTML 结构，只改 CSS，靠裁剪硬“压出”圆角效果。
核心就三行：
table {
border-radius: 8px;
overflow: hidden;
border: 2px solid #333;
}
注意：border 必须写在 table 上，不能只写在 th/td；overflow: hidden 是关键，它会把超出圆角范围的单元格直角部分裁掉。
- 这个方案在 Chrome/Firefox/Safari（iOS 14+）都稳定支持，但老版 Edge（≤18）可能有轻微锯齿
- 如果表格内容有阴影、绝对定位元素或滚动条，
overflow: hidden可能意外截断它们 -
border-radius值建议用em或rem（如0.5em），比固定像素更适配缩放和字体变化
用 border-collapse: separate 精确控制四角圆角
想让左上、右上、左下、右下四个角各自带圆角，且不依赖裁剪，就得放弃 collapse，改用 separate 模式，然后把圆角“分配”到具体单元格上。
典型写法：
table {
border-collapse: separate;
border-spacing: 0;
}
th:first-child { border-top-left-radius: 12px; }
th:last-child { border-top-right-radius: 12px; }
tr:last-child > td:first-child { border-bottom-left-radius: 12px; }
tr:last-child > td:last-child { border-bottom-right-radius: 12px; }
- 必须配合
border-spacing: 0，否则单元格之间会出现白缝 - 如果表头有多行（比如带 colspan 的复杂表头），
th:first-child可能选错，得用:nth-child(1)或加 class 精确定位 - 最后一行未必是
tr:last-child——如果有tfoot，得写成tbody tr:last-child才准确
outline 替代 border 避开 collapse 冲突
当表格必须用 collapse，又不想用 overflow: hidden（怕影响内部交互），可以用 outline 模拟外边框——它不参与盒模型，不受 border-collapse 影响，还能配合 outline-offset 贴紧边缘。
table {
border-radius: 10px;
outline: 2px solid #666;
outline-offset: -2px;
}
这个技巧本质是“画个假边框”，所以它只管最外层轮廓，不管内部单元格是否对齐或是否有缝隙。
-
outline不会触发重排（reflow），性能比border略优 - 键盘焦点访问时，
outline仍会显示，对可访问性友好；但如果设计要求禁用焦点 outline，得额外加:focus { outline: none } - 别用
outline-style: dashed或dotted，圆角处容易出现断点，实线最稳
真正麻烦的不是怎么写那几行 CSS，而是得先判断：你的表格边框到底是谁画的、能不能动 border-collapse、有没有滚动/阴影/绝对定位子元素——这些细节一漏，圆角就变成“看起来像圆角”的错觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
