border-radius 直接作用于 table 无效，因 border-collapse: collapse 消除外边框且边框由 th/td 承担；推荐外层 div 包裹并设 overflow: hidden，或用 outline 替代 border，或改用 border-collapse: separate 配合单元格圆角。
直接给 <table> 加 border-radius 大概率无效——不是你写错了，是浏览器渲染机制决定的。
为什么 border-radius 在 <table> 上经常不生效
根本原因有两个：border-collapse: collapse 会让表格失去独立外边框轮廓，border-radius 就没地方“附着”；而边框实际由 <th> 和 <td> 分别承担，<table> 自身只是容器，不参与边框绘制。
常见错误现象包括：圆角完全没反应、只有左上角微弱生效、刷新后圆角突然消失、在 Safari 中表现异常。
- 不要指望仅靠
table { border-radius: 8px; }就能搞定 - 不要在
border-collapse: collapse模式下强行加border再设圆角——它会被合并掉 - 避免对
th/td单独设border-radius后又用border-collapse: collapse，会导致视觉错位
最稳妥的方案：外层 <div> 包裹 + overflow: hidden
这是兼容性最好、侵入性最小、且适配所有生成器（包括 Bootstrap、Vue 表格组件、后台框架）的做法。核心逻辑是让容器负责“画圆”，表格只管“填内容”。
立即学习“前端免费学习笔记（深入）”；
示例代码：
<div class="table-wrapper">
<table class="tg">
<tr><th>姓名</th><th>城市</th></tr>
<tr><td>张三</td><td>杭州</td></tr>
</table>
</div>
CSS 部分：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.table-wrapper {
border-radius: 8px;
overflow: hidden;
border: 1px solid #e0e0e0;
}
.tg {
width: 100%;
border-collapse: collapse;
}
这个方案不需要改 HTML 结构，也不依赖 JS，现代浏览器全部支持。注意 .table-wrapper 的 border 是真正可见的“外边框”，而 .tg 内部仍可自由控制单元格边框粗细和颜色。
想保留 border-collapse: collapse 又要圆角？用 outline 替代 border
当项目已大量使用 border-collapse: collapse（比如老系统或第三方组件），又不能动结构时，outline 是唯一能绕过 collapse 限制的 CSS 属性——它不参与盒模型，不受合并影响。
关键三行 CSS：
.tg {
border-collapse: collapse;
border-radius: 8px;
overflow: hidden;
outline: 2px solid #4a90e2;
outline-offset: -2px;
}
-
outline必须配合outline-offset: -Xpx向内偏移，否则会悬空在外 - 偏移值必须等于 outline 宽度，否则圆角边缘会出现白边或错位
- 慎用于需要高对比度或深色模式的场景，outline 不支持
box-shadow或渐变
追求像素级精准？用 border-collapse: separate + 单元格圆角
如果你能控制表格结构，且需要顶部/底部圆角严格对齐表头与末行数据，border-collapse: separate 是最可控的方式。它把圆角真正落到 th 和 td 上。
典型写法：
table {
border-collapse: separate;
border-spacing: 0;
}
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; }
注意点：
- 必须清除
border-spacing，否则圆角之间会有缝隙 - 如果表格有
<thead>和<tbody>，需额外处理thead tr:first-child和tbody tr:last-child - 动态插入行时，圆角规则不会自动应用到新行，需 JS 补充或用
:has()（但目前兼容性有限）
真正难的不是写哪几行 CSS，而是判断当前表格是否被框架注入了不可见的 border-collapse 规则，或者有没有其他样式通过 !important 覆盖了 overflow。建议先用浏览器 DevTools 检查 computed 样式里的 border-collapse 和 overflow 实际值，再动手改。
