table 元素直接加 border-radius 无效，因 border-collapse: collapse 会忽略圆角；需用外层容器加 border-radius + overflow: hidden，或改用 outline 模拟外边框。
table 元素直接加 border-radius 为什么没效果？
因为浏览器对 <table> 的渲染机制特殊：当启用 <code>border-collapse: collapse（这是绝大多数现代框架、生成器和默认行为）时，border-radius 会被完全忽略。不是你写错了，是浏览器压根不处理——它把相邻单元格边框“合并”成一条线，圆角失去作用对象。
更麻烦的是，即使你给 <th> 或 <code><td> 单独设 <code>border-radius，只要它们的边框被 collapse 吞掉，圆角依然不可见；而设了 border-collapse: separate 后，又容易出现双线、间隙或错位。
-
border-collapse: collapse是“罪魁”，但也是为了视觉整洁不得不保留的设置 - 单独给
<td> 加 <code>border-radius仅在separate模式下部分生效，且只影响单个单元格，无法形成表格整体圆角感 - 父容器没设
overflow: hidden时，哪怕单元格自己圆了，直角内容仍会“捅破”圆角边界 - 给
<table> 加 <code>border-radius: 6px+overflow: hidden - 删掉原
border，换成outline: 2px solid #e0e0e0 - 必须配
outline-offset: -2px，否则outline会浮在外侧，圆角看起来“飘”着 -
outline不影响布局，但不能设不同方向粗细（比如只想要上边框），这点不如border - 套一层
<div class="table-container">，给它设 <code>border-radius: 6px和overflow: hidden -
.table-container必须有显式border或背景色，否则圆角不可见（透明容器+无边框=视觉消失） - 保留
.table的border-collapse: collapse，但重置thead th:first-child和thead th:last-child的border-top-left-radius/border-top-right-radius - 如果表格有
tfoot，同样要给tfoot td:first-child和tfoot td:last-child加底部圆角 - 表格行要做横向条形图（带圆角色块）：得把
<tr> 改成 <code>display: flex，这要求父容器能正确裁剪，<table> 不支持该 display 值 <li>响应式断点下圆角值要动态变化（如 <code>border-radius: clamp(4px, 1vw, 8px)）：容器更容易绑定媒体查询或 CSS 变量
用 outline 替代 border 实现带圆角的外轮廓
绕过 border-collapse 冲突最轻量的方案：放弃用 border 控制表格外框，改用 outline + outline-offset 模拟带圆角的外边框。它不参与盒模型计算，不受 collapse 影响，还能精准贴合。
Bootstrap 表格怎么安全加圆角？
Bootstrap 的 .table 默认用 border-collapse: collapse，直接加 border-radius 白费劲。推荐用容器包裹法，兼容性好、改动小、样式可控。
哪些情况必须用外层 <div> 包裹？
<p>当你需要阴影、渐变背景、内边距、或与其他圆角组件（如卡片、按钮）保持视觉统一时，<code><table> 自身的样式能力就捉襟见肘了。此时外层容器不是“妥协”，而是必要设计层。
<ul><li>要加 <code>box-shadow：直接给 <table> 加无效，必须由容器承载
<li>要配合毛玻璃（<code>backdrop-filter）或半透明背景：只有块级容器支持这些属性
真正难的不是写几行 CSS，而是判断该在哪一层加圆角——表格自身、单元格、还是容器。多数时候，答案是容器。别跟 <table> 较劲，它从诞生那天起就没打算变圆。</table>
