直接给td或th加border-radius常失效，因table-cell默认不支持圆角，且border-collapse:collapse会彻底禁用圆角；需设border-collapse:separate或用外层div+overflow:hidden裁剪实现。
直接给 td 或 th 加 border-radius 为什么常失效？
因为表格单元格默认是 display: table-cell，而该显示模式下 border-radius 只在有明确边框（border）且未被相邻单元格边框“覆盖”时才可见。更关键的是：当 border-collapse: collapse 启用时，单元格边框被合并成一条线，border-radius 完全失去作用对象——不是写错了，是渲染机制压根不支持。
常见错误现象：
- 写了
td { border-radius: 8px; }但圆角完全不显示 - 只看到第一行/最后一行的角有点弧度，中间行还是直角
- 加了
overflow: hidden到td也没用（table-cell不响应overflow裁剪）
border-collapse: separate 是前提，否则别试 border-radius
必须把表格设为分离边框模型，才能让每个单元格拥有独立、可控制的边框轮廓。此时 border-radius 才真正生效。
实操建议：
- 在
table上设置border-collapse: separate和border-spacing: 0（保持视觉紧凑） - 避免给
table自身设border，改由th/td控制边框和圆角 - 若已有框架或 CMS 输出了
collapse表格，优先用外层div包裹方案（见下一条）
精准控制四角：用伪类选中首尾单元格
不需要给所有单元格加样式，只需定位到真正需要圆角的位置——表头行的左上/右上角，以及末行的左下/右下角。
示例 CSS：
table {
border-collapse: separate;
border-spacing: 0;
}
<p>th:first-child {
border-top-left-radius: 12px;
}</p><p>th:last-child {
border-top-right-radius: 12px;
}</p><p>tr:last-child > td:first-child {
border-bottom-left-radius: 12px;
}</p><p>tr:last-child > td:last-child {
border-bottom-right-radius: 12px;
}</p>
注意点：
- 如果表格用了
<thead>/<code><tbody> 结构，需改用 <code>thead th:first-child等更精确选择器 - 圆角值推荐用
em或rem（如0.75em），比固定px更适配缩放和响应式 - 若单元格有背景色或边框，圆角会自然呈现；若无，加
background-clip: padding-box防止背景溢出
不想改表格结构？用外层 div 包裹并裁剪
这是最稳妥、兼容性最好、且无需动 HTML 的方案。核心思路是：让圆角发生在容器上，靠 overflow: hidden 把直角单元格“切掉”。
HTML 结构保持原样：
<div class="table-wrapper"> <table>...</table> </div>
CSS 关键三行：
.table-wrapper {
border-radius: 12px;
overflow: hidden;
/* 可选：加 outline 模拟外边框，避免 collapse 冲突 */
outline: 2px solid #e0e0e0;
outline-offset: -2px;
}
这个方法绕开了所有表格渲染限制，但要注意：
- 如果表格内容高度超出容器，
overflow: hidden会截断内容——务必确保内容完整可见 - 不要在
.table-wrapper上设padding，否则圆角内侧会出现空白间隙 - 旧版 Safari（iOS ≤ 14）对
overflow: hidden+border-radius组合偶有渲染抖动，加transform: translateZ(0)可缓解
真正容易被忽略的是：圆角是否参与语义化与可访问性。屏幕阅读器不感知圆角，但视觉圆角若掩盖了表头分隔线或数据对齐线，反而会降低可读性。所以别为了圆角牺牲信息层级——先保证清晰，再考虑柔和。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
