Bootstrap 表格默认不支持直接为 <td> 或 <th> 设置圆角，因表格单元格的边框渲染机制与普通块级元素不同；需通过包裹容器、重置表格渲染方式或提升 CSS 优先级才能实现圆角效果。
bootstrap 表格默认不支持直接为 `
在使用 Bootstrap 5 构建自定义表格（如 .reasonCode-table）时，开发者常尝试直接为 th 和 td 元素设置 border-radius，却发现圆角始终不生效——即使样式规则已正确声明、选择器作用域无误，浏览器也未渲染任何圆角效果。根本原因在于：HTML 表格的边框模型（border-collapse）默认为 collapse，此时单元格边框是共享且不可单独圆角化的；border-radius 在 border-collapse: collapse 模式下被完全忽略。
✅ 正确解决方案（推荐按优先级排序）
1. 重置表格边框模型为 separate（最规范）
.reasonCode-table {
border-collapse: separate; /* 关键：启用独立边框 */
border-spacing: 0; /* 可选：消除单元格间隙 */
}
.reasonCode-table th,
.reasonCode-table td {
padding: 8px;
border: 2px solid #7a7878;
border-radius: 6px; /* 现在可正常生效 */
}✅ 优势：语义清晰、无需 hack、兼容所有现代浏览器；
⚠️ 注意：若需保留相邻单元格边框合并效果（如去除重复边线），需配合 border-spacing: 0 与统一边框颜色/宽度。
2. 为整个表格容器添加圆角（视觉等效方案）
当仅需外层视觉圆角（而非每个单元格独立圆角）时，更推荐将表格嵌入带圆角的容器：
<div class="table-wrapper rounded-3 overflow-hidden">
<table class="table reasonCode-table mb-0">
<!-- tbody 内容不变 -->
</table>
</div>.table-wrapper {
border: 2px solid #7a7878; /* 外边框 */
}✅ 优势：性能好、无渲染副作用、与 Bootstrap 的 rounded-* 工具类天然协同。
3. 提升 CSS 优先级（应急但不推荐）
仅当上述方案受限于遗留结构时使用：
.reasonCode-table th,
.reasonCode-table td {
border-radius: 6px !important; /* 强制覆盖 Bootstrap 默认 */
}或使用内联样式（如答案所提）：
<table class="table reasonCode-table" style="border-radius: 6px;">
⚠️ 风险：!important 破坏样式可维护性；内联样式无法复用且违背关注点分离原则。
? 补充说明：为什么 .reasonCode-table 上设 border-radius 无效？
单纯给 <table> 元素设置 border-radius，仅对其自身盒模型生效。而表格内容（<tbody>、<tr>、<td>）默认采用 display: table-* 渲染，其子元素不会继承或响应父级 border-radius —— 这与 div 嵌套逻辑完全不同。因此，必须作用于实际渲染边框的元素（即 td/th），并确保其处于可圆角化的渲染上下文（border-collapse: separate）。
✅ 最终推荐代码片段
<!-- HTML -->
<div class="border rounded-3 overflow-hidden" style="border-color: #7a7878;">
<table class="table reasonCode-table mb-0">
<tbody>
<tr>
<td class="col-md-1 reasonCode-table__items">F123</td>
<td class="col-md-2 reasonCode-table__items">X987Y</td>
<td class="col-md-9 last-column">Lorem ipsum...</td>
</tr>
<!-- 其他行 -->
</tbody>
</table>
</div>/* CSS */
.reasonCode-table {
border-collapse: separate;
border-spacing: 0;
}
.reasonCode-table th,
.reasonCode-table td {
padding: 8px;
border: 2px solid #7a7878;
border-radius: 6px;
}
.reasonCode-table thead th {
border-top: none;
border-right: none;
border-left: none;
}? 总结：表格圆角失效本质是 CSS 渲染模型限制，而非选择器错误或优先级不足。优先采用 border-collapse: separate + border-radius 组合，兼顾语义、性能与可维护性；避免滥用 !important 或内联样式。在 Bootstrap 生态中，善用容器封装（如 rounded-* + overflow-hidden）往往是更优雅的视觉解决方案。
