直接给加border-radius无效，因border-collapse: collapse会禁用该属性；可靠方案是改用border-collapse: separate并为单元格角点设圆角，或用outline模拟外轮廓。
直接给 常见错误现象： 不用重写 HTML，纯 CSS 可解。选哪种取决于你能否控制表格的 第一种方案示例（ 第二种方案示例（ 注意： 别盲目套用 <table> 加 <code>border-radius 大概率没用——不是你写错了，是浏览器本来就不渲染它。 根本原因在于表格的边框模型：只要用了 border-collapse: collapse（现代框架、生成器、Bootstrap 默认都开），border-radius 就会被忽略。得绕过这个限制，而不是硬刚。
为什么
border-radius 在 <table> 上不生效
<p>表格的“边框”其实分散在 <code><th> 和 <code><td> 上，<code><table> 本身没有独立可圆角的外轮廓；而 <code>border-collapse: collapse 更会让所有单元格边框合并成一条线，彻底剥夺 border-radius 的作用对象。这不是 bug，是规范行为。
– 写了 table { border-radius: 8px; overflow: hidden; }，但四个角还是直的
– 表格内容被裁掉一部分，但边角依然锋利
– 检查 computed styles 发现 border-radius 值存在，但视觉无变化display: block 或加 inline-block 让它突然生效——<table> 是替换元素，display 类型不影响此限制
<li>不要只加 <code>overflow: hidden 而不处理边框模型，那只会把内容切掉，角还是直的border-radius + table 的支持极差，哪怕用了 workaround 也建议降级兜底两种可靠方案：用
outline 模拟外轮廓 or 改用 separate 模式border-collapse 值：
border-collapse: separate + 单元格角点圆角outline + outline-offset 替代外边框separate 模式）：table {
border-collapse: separate;
border-spacing: 0;
}
th:first-child { border-top-left-radius: 6px; }
th:last-child { border-top-right-radius: 6px; }
tr:last-child > td:first-child { border-bottom-left-radius: 6px; }
tr:last-child > td:last-child { border-bottom-right-radius: 6px; }
outline 模拟）：.tg {
border-collapse: collapse;
border-radius: 6px;
overflow: hidden;
outline: 2px solid #ddd;
outline-offset: -2px;
}
outline 不参与布局，不会撑开容器，也不会被 collapse 干扰，这是它比 border 唯一且关键的优势。
border-radius 数值怎么设才合理4px 或 8px。表格圆角大小要匹配字体缩放和行高：
em 单位，如 border-radius: 0.5em，随字号自动缩放6px）适合固定设计系统，但小屏下可能显得生硬50%——表格宽高几乎从不相等，结果一定是椭圆角，且不可控overflow: hidden 外层 wrapper，而非仅作用于 <table>
<p>另外，<code>border-radius 的四个角可以单独控制，但表格场景下极少需要差异化处理左上/右下——统一用 border-top-left-radius 这类独立属性，比写 border-radius: 6px 6px 0 0 更清晰、更易维护。
真正容易被忽略的点是：圆角是否在所有分辨率、所有缩放比例、所有滚动状态下都保持完整。光在桌面 Chrome 里看着圆了，不等于它在 iOS Safari 缩放 150% 时还圆——得实机测，尤其关注右下角和滚动边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
