`border-radius` 无法直接作用于 `table` 元素，主因是 `border-collapse: collapse` 的限制及边框分散在单元格上；需改用 `separate` 模式，并通过精细化控制表头/单元格的边框与圆角实现视觉上的圆角表格。
在 CSS 中，为 <table> 元素直接设置 border-radius 常常“失效”，这不是浏览器 Bug，而是由 HTML 表格的渲染机制决定的。核心问题有两个：
border-collapse: collapse 与 border-radius 不兼容
当 border-collapse: collapse 启用时，相邻单元格的边框会合并为一条线，此时表格整体失去独立的“外边框轮廓”，border-radius 失去作用对象，自然无法生效。边框实际属于 th/td，而非 table
即使你给 table 设置了 border-radius 和 border，若边框样式（如 3px solid black）写在 th 或 td 上，那么圆角必须应用到这些具体单元格的特定角落，而非父级 table。
✅ 正确解法：放弃 collapse，改用 separate + 精准圆角定位
table {
border-collapse: separate;
border-spacing: 0; /* 消除单元格间隙，保持紧凑外观 */
margin: 0 auto;
}
/* 为表头第一行的首尾单元格添加顶部圆角 */
th:first-child {
border-top-left-radius: 15px;
}
th:last-child {
border-top-right-radius: 15px;
}
/* 为最后一行的首尾单元格添加底部圆角 */
tr:last-child > td:first-child {
border-bottom-left-radius: 15px;
}
tr:last-child > td:last-child {
border-bottom-right-radius: 15px;
}
/* 统一边框：用 th/td 自身边框构建表格网格线 */
th, td {
border: 1px solid black;
padding: 12px 15px;
}
/* 调整表头边框粗细（可选） */
th {
background-color: #0b865d;
color: white;
border-bottom: 3px solid black; /* 强化表头下边框 */
}⚠️ 注意事项：
- 勿在 table 上设 border：否则会与单元格边框叠加，破坏圆角效果和视觉一致性；
- border-spacing: 0 是关键：若留有间距，圆角会被白色缝隙“打断”；
- 圆角必须落在具体元素上：border-radius 只对具有边框且处于视觉最外层的元素生效，因此需明确指定 th:first-child、td:last-child 等选择器；
- *避免滥用 ` { border: 0 }**：全局重置可能干扰其他组件，应针对性清除（如table { border: none }`）；
- 响应式兼容性：该方案在所有现代浏览器（Chrome/Firefox/Safari/Edge）中均稳定支持，无需前缀。
? 进阶提示：若需阴影或悬停效果，可在 table 上添加 box-shadow 并配合 overflow: hidden（确保圆角裁剪内部溢出），但注意 overflow: hidden 在 border-collapse: separate 下仍有效，可安全使用。
立即学习“前端免费学习笔记（深入）”；
通过将设计责任从“容器圆角”转向“单元格边框协同”，你就能优雅地实现真正圆润、专业且语义清晰的表格视觉效果。
