Bootstrap表格圆角默认不生效，因.table类默认启用border-collapse: collapse，导致边框合并、border-radius被忽略；正确做法是外层容器设border-radius和overflow-hidden，表格改用border-collapse: separate，并为首尾单元格手动添加圆角。
Bootstrap表格圆角为什么默认不生效
因为 bootstrap 的 .table 类默认设置了 border-collapse: collapse，这会让边框合并，导致 border-radius 在表格整体上失效——圆角只对单个单元格起作用，但被相邻单元格的边框“盖住”了。
给整个表格加圆角的正确写法
必须同时处理三件事：分离边框、给外层容器加圆角、控制内部单元格边框衔接。推荐用包裹容器 + 覆盖样式：
- 用
<div class="rounded-2 overflow-hidden"> 包住 <code><table class="table"> <li>给 <code>table加border-collapse: separate和border-spacing: 0 - 给第一行
th和最后一行td单独加border-top-left-radius/border-top-right-radius/border-bottom-left-radius/border-bottom-right-radius
示例 CSS（可加在自定义样式表或 <style></style> 中）：
.table-rounded {
border-collapse: separate;
border-spacing: 0;
}
.table-rounded th:first-child,
.table-rounded td:first-child {
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.table-rounded th:last-child,
.table-rounded td:last-child {
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
Bootstrap 5.3+ 的简化方案（仅限无边框表格）
如果用的是 .table-borderless，可以直接加 rounded-2 到 <table> 上，但必须配合 <code>overflow: hidden 防止内容溢出圆角：
- 确保表格没有
border-collapse: collapse干扰（.table-borderless默认是separate） - 加
class="table table-borderless rounded-2 overflow-hidden" - 注意：带边框的表格（如
.table-bordered）仍需手动处理单元格圆角，否则右下角会露直角
容易被忽略的兼容性细节
圆角在 <thead> 和 <code><tbody> 交界处容易断开，尤其当用了 <code>sticky-header 或自定义滚动时：
- Chrome 和 Firefox 对
border-radius+border-collapse: separate支持稳定，Safari 16.4+ 才完全修复旧版渲染异常 - 如果表格有
vertical-align: middle或行内图片，可能撑高单元格导致圆角被截断，建议统一设line-height和padding - 响应式断点缩放后，
rounded-2的像素值不变，但视觉比例会变，必要时用rounded-sm或自定义border-radius: 0.375rem
真正起效的关键不是加类名，而是打破 collapse 布局并让四个角的单元格真正“暴露”出来——其他都是修修补补。
