html表格圆角需同时满足border-collapse: separate、border-radius和overflow: hidden三要素，缺一不可；否则单元格直角会破坏圆角效果。
HTML表格本身不支持 border-radius 直接生效——这是最常见的误解起点。你给 <table> 加了 <code>border-radius 却没效果，不是写错了，是浏览器默认行为在“拦路”。
为什么 table 元素加 border-radius 没反应？
因为表格的边框渲染机制特殊：默认 border-collapse: collapse 时，单元格（<td>/<code><th>）的边框会合并，圆角被裁剪；即使设成 <code>separate，<table> 的圆角也只作用于外层 box，但内部单元格的直角边框会“顶破”圆角区域。<p>真正起效的圆角，必须落在最外层可见边界上，且该边界不能被子元素的直角边框覆盖。</p>
<ul>
<li>关键前提是：表格必须有显式、独立的外边框（<code>border），且不能依赖单元格边框拼合
border-collapse: separate 是必要条件，否则圆角完全失效<td> 和 <code><th> 的 <code>border，避免它们“撑出”尖角正确实现圆角表格的 CSS 组合
以下是最小可行配置，缺一不可：
table {
border-collapse: separate;
border-spacing: 0;
border: 2px solid #ccc;
border-radius: 8px;
overflow: hidden; /* 关键！裁掉溢出的直角 */
}
th,
td {
border: 1px solid #ddd;
padding: 8px 12px;
}
/* 顶部行单元格需手动圆角（可选，增强视觉连贯性） */
th:first-child {
border-top-left-radius: 8px;
}
th:last-child {
border-top-right-radius: 8px;
}
/* 底部行同理 */
tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}
注意：overflow: hidden 是让圆角“看起来有效”的实际执行者——它把超出 border-radius 范围的直角内容直接裁掉，而非真正渲染圆角边框。
IE 和旧版 Safari 的兼容性陷阱
border-radius 在表格上的表现，在 IE11 及更早版本中完全不支持；Safari 12 之前对 overflow: hidden + border-radius 的组合渲染不稳定，可能出现圆角闪烁或裁切错位。
- 若需兼容 IE，只能放弃原生圆角，改用背景图或伪元素模拟（不推荐，维护成本高）
- Safari 用户遇到圆角消失，大概率是漏写了
overflow: hidden或border-collapse: separate - 移动端 iOS Safari 对
border-spacing: 0的处理更严格，务必确认没有意外空隙
当表格带表头固定（fixed header）时怎么处理？
使用 position: sticky 固定表头后，border-radius 很容易只作用于滚动区域，导致表头和主体圆角断开。
- 解决方案：把圆角加在包裹表格的容器上，而非
<table> 自身<li>容器需设 <code>overflow: hidden，且<table> 保持 <code>border-collapse: separate - 表头单元格（
<th>）仍需单独设置 <code>border-top-left-radius和border-top-right-radius，否则滚动时圆角会“撕裂”圆角表格不是纯 CSS 属性开关，而是边框模型、溢出控制、单元格样式三者协同的结果。最容易被忽略的是
overflow: hidden——没它，其他都白配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
