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