Bootstrap 5表格实现border-radius与边框合并的解决方案

问题说明 #

使用Bootstrap 5时，想要创建一个带6px圆角的表格，但遇到以下问题：

• 设置border-collapse: collapse时，表格的圆角无法生效；
• 尝试给table设border-collapse: separate、给td/th设border-collapse: collapse，会出现边框间隙，无法达到简洁的合并效果。

预期效果为：表格边框完全合并，整体带有6px圆角，样式简洁。

解决方案 #

核心思路是利用**外层容器的overflow: hidden配合border-radius**实现表格圆角，同时表格保持border-collapse: collapse来合并边框，通过控制单元格边框方向避免重复渲染。

修改后的代码 #

CSS 样式

/* 外层容器：实现圆角，裁剪表格边角 */
.table-container {
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid #7a7878; /* 表格外层边框，与单元格边框一致 */
}

.reasonCode-table {
  width: 100%;
  border-collapse: collapse; /* 强制合并边框，消除间隙 */
}

.reasonCode-table td {
  border: 2px solid #7a7878;
  padding: 8px;
  /* 只保留右侧和底部边框，避免重复渲染 */
  border-top: none;
  border-left: none;
}

/* 给第一行单元格补上顶部边框 */
.reasonCode-table tr:first-child td {
  border-top: 2px solid #7a7878;
}

/* 给第一列单元格补上左侧边框 */
.reasonCode-table td:first-child {
  border-left: 2px solid #7a7878;
}

.reasonCode-table__items {
  vertical-align: middle;
  text-align: center;
}

.reasonCode-table__last-column {
  background-color: #f1f1f1;
}

HTML 结构

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-container">
  <table class="reasonCode-table">
    <tbody>
      <tr>
        <td class="col-md-1 reasonCode-table__items">101</td>
        <td class="col-md-2 reasonCode-table__items">X764A</td>
        <td class="col-md-9 reasonCode-table__last-column">
          Claim submitted with incomplete patient information.
        </td>
      </tr>
      <tr>
        <td class="reasonCode-table__items">202</td>
        <td class="reasonCode-table__items">H225B</td>
        <td class="reasonCode-table__last-column">
          The provided diagnosis code is invalid or not recognized.
        </td>
      </tr>
      <tr>
        <td class="reasonCode-table__items">303</td>
        <td class="reasonCode-table__items">C879G</td>
        <td class="reasonCode-table__last-column">
          Procedure code billed is not covered under the patient's insurance plan.
        </td>
      </tr>
      <tr>
        <td class="reasonCode-table__items">404</td>
        <td class="reasonCode-table__items">F512T</td>
        <td class="reasonCode-table__last-column">
          The claim contains duplicate service entries.
        </td>
      </tr>
      <tr>
        <td class="reasonCode-table__items">505</td>
        <td class="reasonCode-table__items">Z989P</td>
        <td class="reasonCode-table__last-column">
          Billing provider is not authorized to perform the billed services.
        </td>
      </tr>
    </tbody>
  </table>
</div>

方案说明 #

1. 外层容器：通过border-radius: 6px和overflow: hidden，将表格的四个边角裁剪成圆角，解决border-collapse: collapse下表格自身圆角不生效的问题；
2. 表格边框合并：border-collapse: collapse确保单元格边框完全合并，无间隙；
3. 单元格边框控制：通过给单元格设置border-top: none和border-left: none，仅保留右侧和底部边框，再给第一行和第一列的单元格补上对应边框，避免重复边框导致的视觉厚重感，同时保证整体边框完整。

内容的提问来源于stack exchange，提问作者Jesus