Bootstrap 5表格Border radius设置未生效的解决求助

方案1：容器包裹法（最简单易维护） #

给表格套一个外层容器，利用容器的overflow: hidden实现整体圆角，同时统一管理边框样式：

修改后的HTML #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="reasonCode-table-container">
  <table class="table reasonCode-table">
    <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 dolor sit amet, consectetur adipiscing elit.
                Phasellus facilisis, urna eget lacinia lacinia, mauris quam
                gravida elit.
            </td>
        </tr>
        <tr>
            <td class="reasonCode-table__items">G456</td>
            <td class="reasonCode-table__items">Z654W</td>
            <td class="last-column">
                Nullam fringilla consectetur nunc, sit amet tincidunt eros
                congue ut.
            </td>
        </tr>
        <tr>
            <td class="reasonCode-table__items">H789</td>
            <td class="reasonCode-table__items">P123Q</td>
            <td class="last-column">
                Fusce vel dolor vel odio volutpat laoreet eget eu elit.
            </td>
        </tr>
        <tr>
            <td class="reasonCode-table__items">J012</td>
            <td class="reasonCode-table__items">L567M</td>
            <td class="last-column" colspan="2">
                Sed id nunc sit amet lectus feugiat fermentum.
            </td>
        </tr>
        <tr>
            <td class="reasonCode-table__items">K345</td>
            <td class="reasonCode-table__items">H789K</td>
            <td class="last-column">
                Mauris hendrerit bibendum mi, in tincidunt nisi dapibus at.
            </td>
        </tr>
    </tbody>
  </table>
</div>

对应的CSS #

.reasonCode-table-container {
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid #7a7878;
}

.reasonCode-table th, .reasonCode-table td {
  padding: 8px;
  border: none;
  border-bottom: 2px solid #7a7878;
}

/* 去掉最后一行的底部边框，避免和容器边框重复 */
.reasonCode-table tbody tr:last-child td {
  border-bottom: none;
}

.reasonCode-table__title {
  text-align: center;
}

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

.reasonCode-table thead th {
  border-top: none;
  border-right: none;
  border-left: none;
}

方案2：精细控制单元格圆角 #

如果需要给表格角落的单元格单独设置圆角，修改表格的边框合并规则：

修改后的CSS #

.reasonCode-table {
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid #7a7878;
  border-radius: 6px;
}

.reasonCode-table th, .reasonCode-table td {
  padding: 8px;
  border: 2px solid #7a7878;
  border-radius: 0;
}

/* 给四个角落的单元格设置圆角 */
.reasonCode-table tbody tr:first-child td:first-child {
  border-top-left-radius: 6px;
}
.reasonCode-table tbody tr:first-child td:last-child {
  border-top-right-radius: 6px;
}
.reasonCode-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}
.reasonCode-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}

/* 去掉相邻单元格的重复边框，避免双线条 */
.reasonCode-table td:not(:last-child) {
  border-right: none;
}
.reasonCode-table tr:not(:last-child) td {
  border-bottom: none;
}

.reasonCode-table__title {
  text-align: center;
}

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

.reasonCode-table thead th {
  border-top: none;
  border-right: none;
  border-left: none;
}

原理说明 #

Bootstrap的.table类默认设置了border-collapse: collapse，这种模式下单元格的border-radius会失效，因为边框是合并在一起的。上述两种方案分别通过容器裁剪、修改边框合并规则来绕过这个限制。

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