直接给 td 或 th 加 border-radius 常失效，因 border-collapse: collapse 合并单元格边框使圆角无作用对象；需改用 separate 模式并显式设置 border，或通过外层容器 overflow: hidden + border-radius 实现视觉圆角。
直接给 td 或 th 加 border-radius 为什么常失效？
因为表格默认使用 border-collapse: collapse，单元格边框被“合并”成一条线，border-radius 失去作用对象；同时，td 默认是 display: table-cell，该显示模式下圆角只在有明确边框（border）且未被相邻单元格边框覆盖时才可见。
常见错误现象：加了 border-radius: 8px 没反应，或只有单侧/角落生效，甚至出现边框断裂、错位。
- 必须为
td和th显式设置border（哪怕只是1px solid transparent） - 禁用
border-collapse: collapse，改用border-collapse: separate+border-spacing: 0 - 若保留
collapse，则圆角只能靠外层容器裁剪，无法真正“圆”单元格本身
border-collapse: separate 下精准控制四个角的圆角
这是最可控、语义最清晰的方案：把圆角落在具体单元格上，不依赖父容器裁剪，兼容性好（Chrome/Firefox/Safari/Edge 均支持）。
关键点在于定位首行首列、首行末列、末行首列、末行末列这四个单元格：
立即学习“前端免费学习笔记（深入）”；
-
th:first-child→ 设置border-top-left-radius -
th:last-child→ 设置border-top-right-radius -
tr:last-child > td:first-child→ 设置border-bottom-left-radius -
tr:last-child > td:last-child→ 设置border-bottom-right-radius
示例 CSS：
table { border-collapse: separate; border-spacing: 0; }
th, td { border: 1px solid #ddd; padding: 8px; }
th:first-child { border-top-left-radius: 6px; }
th:last-child { border-top-right-radius: 6px; }
tr:last-child > td:first-child { border-bottom-left-radius: 6px; }
tr:last-child > td:last-child { border-bottom-right-radius: 6px; }用 overflow: hidden + border-radius 套容器实现“视觉圆角”
当无法修改表格渲染模式（比如第三方组件强制 collapse），或需配合阴影、渐变边框等复杂效果时，绕过 table 本身限制是最稳妥的选择。
原理：用一层 <div> 包裹 <table>，圆角和裁剪逻辑全交给外层容器，table 只负责内容布局。
- 外层
<div class="table-wrapper">设置border-radius和overflow: hidden -
<table>保持默认border-collapse: collapse，但需确保有整体边框（如border: 1px solid #ddd） - 注意：若表格内容高度超出容器，底部圆角可能被截断，需配合
max-height或滚动控制
示例结构：
<div class="table-wrapper">
<table>
<tr><th>A</th><th>B</th><th>C</th></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</div>对应 CSS：
.table-wrapper {
border-radius: 8px;
overflow: hidden;
border: 1px solid #ddd; /* 可选，用于强化外轮廓 */
}
table {
width: 100%;
border-collapse: collapse;
margin: 0;
}哪些场景下不建议强行给单元格加圆角？
不是所有表格都适合“每个单元格都圆”。实际项目中容易忽略的约束比想象中多：
- 表头跨列（
colspan）或跨行（rowspan）时，圆角定位会错乱，:first-child/:last-child选择器失效 - 响应式表格（如
display: block+ 横向滚动）中，圆角在小屏下可能被截断或与滚动条冲突 - 使用
border-image或box-shadow时，border-radius与这些属性叠加可能导致渲染异常（尤其 Safari） - 可访问性要求高时（如屏幕阅读器聚焦），圆角本身无语义，但若靠圆角传达状态（如“首行特殊”），应辅以
aria-label或视觉对比强化
真正需要圆角的，往往是整个表格区块的视觉收口——这时候优先考虑外层容器方案，比硬抠单元格更稳定、更易维护。
