直接给 <table> 加 border-radius 无效，因 border-collapse: collapse 使表格失去独立外轮廓；最稳妥方案是用外层 <div> 包裹并设置 overflow: hidden 裁剪溢出。
直接给 <table> 加 border-radius 大概率无效，尤其当用了 border-collapse: collapse ——这不是你写错了，是浏览器根本不会渲染它。
为什么 border-radius 在 <table> 上不生效
表格的圆角失效不是 bug，而是渲染机制决定的：
-
border-collapse: collapse会让单元格边框“合并成一条线”，<table>自身失去独立外轮廓，border-radius失去作用对象 - 即使你给
<table>写了border和border-radius，只要th/td自己也有边框（比如来自框架或重置样式），实际视觉边界仍由单元格控制 - 圆角需要可裁剪的“实体区域”，而默认
<table>没有背景、没有显式边框、且overflow对表格元素行为不稳定
最稳妥的方案：外层 <div> 包裹 + overflow: hidden
不改 HTML 结构、不碰 border-collapse、兼容所有现代浏览器。核心就三行 CSS：
.table-wrapper {
border-radius: 8px;
overflow: hidden;
/* 可选：加 outline 模拟外边框，避免和内部 border 冲突 */
outline: 2px solid #e0e0e0;
outline-offset: -2px;
}
<p>.table-wrapper table {
border-collapse: collapse;
width: 100%;
}
- 必须用
<div class="table-wrapper"><table>...</table></div>包一层，不能只靠<table>自身 -
overflow: hidden是关键——它会裁掉表格内部单元格直角溢出的部分，让圆角“露出来” - 用
outline而非border，是因为outline不参与盒模型，不受collapse影响；outline-offset: -2px让它紧贴表格边缘 - 如果已有全局
table { border: 1px solid #ddd }，建议删掉或用outline替代，否则内外边框可能错位
如果必须用 border-collapse: separate
适合能控制表格结构、且需要精细控制每个角的场景（比如表头左上/右上、末行左下/右下）：
立即学习“前端免费学习笔记（深入）”；
table {
border-collapse: separate;
border-spacing: 0;
border-radius: 8px;
overflow: hidden; /* 依然需要，防止内容撑破 */
}
<p>th:first-child {
border-top-left-radius: 8px;
}</p><p>th:last-child {
border-top-right-radius: 8px;
}</p><p>tr:last-child > td:first-child {
border-bottom-left-radius: 8px;
}</p><p>tr:last-child > td:last-child {
border-bottom-right-radius: 8px;
}
-
border-spacing: 0必须设，否则单元格间隙会破坏圆角连续性 - 圆角只能加在具体单元格上（
th/td），<table>的border-radius仅作兜底（部分浏览器支持） - 如果表格有
colspan或rowspan，:first-child/:last-child选择器可能失效，得改用类名定位 - 这种写法在 Safari 旧版本中对
border-radius渲染不稳定，生产环境建议加@supports降级
容易被忽略的细节
很多“圆角失败”其实卡在这些地方：
- 父容器设置了
overflow: hidden，但没给.table-wrapper设高度或最小尺寸，导致裁剪范围不可控 - 表格里用了
vertical-align: bottom或line-height过大，让文字下沉，视觉上像圆角被“顶破” - 加了
box-shadow后圆角消失——因为阴影默认从元素原始矩形区域出发，需配合overflow: hidden才能同步裁剪 - 动态渲染表格（如 Vue/React）时，CSS 类名没及时挂载，或 JS 插入的
<table>没套<div>包裹层
