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