Bootstrap 默认表格不支持直接设置 border-radius，需通过外层容器配合 overflow: hidden 及合理边框控制来实现视觉上的圆角效果。
bootstrap 默认表格不支持直接设置 `border-radius`，需通过外层容器配合 `overflow: hidden` 及合理边框控制来实现视觉上的圆角效果。
在 Bootstrap 中，原生 <table> 元素及其单元格（<th>/<td>）对 border-radius 的渲染存在天然限制：浏览器无法为表格内部单元格的独立边框正确裁剪圆角，尤其当单元格间存在共享边框（如 border-collapse: collapse）时，border-radius 会被忽略或失效。因此，直接对 .table 或其子元素设置 border-radius 通常无效。
✅ 正确做法：容器包裹 + 溢出隐藏 + 边框重构
核心思路是不在表格自身设圆角，而是在其父容器上设置 border-radius 并启用 overflow: hidden，同时确保表格内容（尤其是表头和首尾列）的边框逻辑与圆角视觉对齐：
<div class="table-container">
<table class="table reasonCode-table">
<!-- 表格结构保持不变 -->
</table>
</div>对应 CSS（兼容 Bootstrap 4/5）：
.table-container {
border-radius: 6px;
overflow: hidden; /* 关键：裁剪超出区域 */
border: 1px solid #7a7878; /* 可选：为容器添加可见边框，强化圆角感知 */
}
.reasonCode-table {
margin-bottom: 0; /* 消除 Bootstrap 默认 table margin */
border-collapse: separate; /* 必须！禁用 collapse，启用独立单元格边框 */
border-spacing: 0; /* 避免单元格间距破坏圆角连续性 */
}
.reasonCode-table th,
.reasonCode-table td {
border: 1px solid #7a7878;
padding: 8px;
}
/* 仅对表头首尾单元格设置顶部圆角（视觉锚点） */
.reasonCode-table thead th:first-child {
border-top-left-radius: 6px;
}
.reasonCode-table thead th:last-child {
border-top-right-radius: 6px;
}
/* 清除表头默认上下左右边框（避免与容器边框重叠） */
.reasonCode-table thead th {
border-top: none;
border-right: none;
border-left: none;
background-color: #f8f9fa; /* 可选：提升表头可读性 */
}⚠️ 注意事项
- border-collapse: separate 是关键前提：Bootstrap 默认使用 collapse，会导致所有边框合并，使 border-radius 完全失效；改为 separate 后，每个单元格拥有独立边框，才能被容器 overflow: hidden 有效裁剪。
- 避免在 tbody tr td 上盲目加 border-radius：底部圆角需统一由容器承担，手动为最后一行单元格设 border-bottom-left/right-radius 易因行高、padding 或内容换行导致错位，且维护成本高。
- 响应式场景下需验证：若表格在小屏幕中横向滚动（如 .table-responsive），请将 .table-container 套在 .table-responsive 外层，并确保 overflow-x: auto 不干扰 overflow: hidden 的圆角裁剪逻辑（推荐结构：.table-container > .table-responsive > table）。
- 深色主题适配：若使用深色背景，建议显式设置 .table-container 的 background-color，防止圆角边缘出现意外留白。
✅ 最终效果验证要点
- 容器有清晰的 6px 圆角轮廓；
- 表头左右两端呈现平滑弧度；
- 表格无内部毛边、错位或边框断裂；
- 所有单元格边框颜色、粗细一致，无重复叠加。
通过该方案，你无需修改 Bootstrap 源码或引入额外 JS，即可在任何 Bootstrap 版本中稳定、语义化地实现专业级圆角表格设计。
