border-radius在table上失效的根本原因是border-collapse: collapse使表格失去外轮廓，且边框实际属于td/th而非table；最稳妥方案是table加border-radius和overflow: hidden，并用outline模拟边框。
直接给 <table> 加 border-radius 大概率没反应——不是你写错了，是表格的渲染机制让它“假装看不见”。
为什么 border-radius 在 <table> 上经常失效？
根本原因有两个：
-
border-collapse: collapse会让所有单元格边框合并成线，<table>自身失去可渲染的“外轮廓”，border-radius就无从下手 - 边框实际属于
<th>和<td>，不是<table>；哪怕你给 table 设了border，只要 collapse 存在，圆角仍被忽略
最稳妥：用 overflow: hidden + border-radius 套住整个表格
不改 HTML 结构、不碰 border-collapse，也能生效。关键在于把圆角“裁”出来：
- 给
<table>加border-radius（比如8px） - 必须同时加
overflow: hidden，否则单元格直角会顶破圆角边界 - 保留
border-collapse: collapse没问题，但别指望它自带外边框——你需要用outline模拟
示例 CSS：
立即学习“前端免费学习笔记（深入）”；
.tg {
border-collapse: collapse;
border-radius: 8px;
overflow: hidden;
outline: 2px solid #e0e0e0;
outline-offset: -2px;
}
想精确控制哪几个角？得操作 <th> 和 <td>
如果你需要只圆顶部两个角、或只圆左下角，就必须放弃 collapse，切到 separate 模式，再逐个单元格设圆角：
- 先设
border-collapse: separate; border-spacing: 0; -
<th>第一个子元素加border-top-left-radius -
<th>最后一个子元素加border-top-right-radius - 最后一行的
<td>首尾分别加border-bottom-left-radius和border-bottom-right-radius
注意：这种写法对 colspan/rowspan 敏感，有合并单元格时需额外调整选择器。
容易被忽略的兼容性细节
现代浏览器（Chrome/Firefox/Safari ≥ 2023）对 border-radius + overflow: hidden on <table> 支持良好，但仍有两处易翻车：
- 旧版 Safari（≤ iOS 15.4）可能不裁剪
<th>的背景色溢出，加background-clip: padding-box补救 - 如果表格父容器本身有
overflow: hidden，且尺寸不够容纳圆角半径，圆角会被二次截断 -
outline在部分 Windows 高对比度模式下可能不显示，如需强保障，可用带border-radius的<div class="table-wrapper">包一层
