table元素本身不支持border-radius直接生效，需用外层div包裹并设置border-radius和overflow:hidden，同时table设border-collapse:separate以避免边框冲突。
table 元素本身不支持 border-radius 直接生效
直接给 <table> 设置 border-radius 通常无效，因为表格的渲染模型（尤其是 border-collapse: collapse）会让圆角被子元素（如 <td>、<th>）破坏。浏览器会优先按单元格边框拼接规则绘制，忽略父容器圆角。
真正起作用的是「用外层容器包裹 table，并控制 overflow 和 border-radius 的配合」：
- 外层
<div>设置border-radius和overflow: hidden -
<table>保持默认或设为border-collapse: separate - 确保 table 没有负 margin 或超出容器的 padding/border
overflow: hidden 必须作用于带 border-radius 的父容器
很多人误把 overflow: hidden 加在 <table> 上——这没用，因为 table 本身不是圆角容器，裁剪目标是它的视觉溢出部分，而裁剪锚点必须是圆角的边界。
正确结构示例：
立即学习“前端免费学习笔记（深入）”；
<div style="border-radius: 8px; overflow: hidden;">
<table style="border-collapse: separate; border-spacing: 0;">
<tr><td>A</td><td>B</td></tr>
</table>
</div>
注意：border-collapse: separate 是关键，否则 border-spacing: 0 下的 collapsed 表格仍可能因内部边框连接方式导致圆角处出现白边或断裂。
IE 和旧版 Safari 对 overflow + border-radius 裁剪支持不稳定
在 IE11 或 Safari ≤ 14.5 中，overflow: hidden 对 <table> 子元素的裁剪可能失效，尤其当 table 有 border 或 background 时。
兼容性补救建议：
- 避免给
<table>自身设border，改用<td>边框模拟 - 对
<td>设置border-radius（仅限首行/末行的首尾单元格），配合overflow: hidden父容器增强视觉一致性 - 必要时用
clip-path: rounded-rect()替代（但需检查目标环境支持）
圆角尺寸与表格内容间距容易冲突
如果 <td> 内有 padding 或内容紧贴边缘，border-radius 裁剪后可能让文字或图标被切掉，尤其在小圆角（如 4px）+ 大 padding 组合下。
实操建议：
- 父容器
border-radius值 ≥<td>的padding值（例如padding: 12px→border-radius: 12px） - 用
box-sizing: border-box控制<td>尺寸，避免 padding 导致宽度溢出 - 测试不同缩放比例（100% / 125% / 150%）下是否仍有裁剪异常
圆角裁剪本质是视觉遮罩，不是重绘表格结构；一旦内容动态撑开或响应式断点变化，就得重新验证裁剪边界是否依然准确。
