使用Bootstrap类无法设置表格圆角，求解决方法

你遇到的问题根源是Bootstrap的.table类默认启用了border-collapse: collapse——这种边框合并模式下，直接给表格添加rounded类不会生效，因为合并后的边框无法识别元素的圆角属性；同时你给<thead>加的rounded-top也会因为thead是表格内部元素，无法单独形成圆角效果。

下面是两种可行的解决办法：

方法1：使用Bootstrap 5.2+自带的.table-rounded类 #

Bootstrap 5.2及以上版本新增了专门的.table-rounded类，用来给带边框的表格添加圆角，直接替换你原来的rounded类即可：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<table class="table table-bordered bg-white table-rounded">
  <thead class="mid-purple-bg">
    <tr>
      <th class="col-lg-1 w-50">Code</th>
      <th class="col-lg-10">Name</th>
      <th class="col-lg-1 w-50">Plan</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active-link" style="font-size: 16px;" tabindex="0" ng-reflect-router-link="">
      <td>test</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
  </tbody>
</table>

这个类会自动处理border-collapse和圆角的兼容性问题，不需要额外自定义样式。

方法2：自定义CSS实现兼容 #

如果你的Bootstrap版本低于5.2，可以通过自定义CSS来解决：

1. 给表格设置border-collapse: separate并调整边框间距为0
2. 给表格添加圆角，同时处理表头、单元格的边框重叠问题

自定义CSS代码：

.custom-rounded-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.5rem;
  overflow: hidden;
}

.custom-rounded-table thead th {
  border-top: none;
}

.custom-rounded-table td,
.custom-rounded-table th {
  border-right: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
}

.custom-rounded-table td:last-child,
.custom-rounded-table th:last-child {
  border-right: none;
}

然后修改表格的类：

<table class="table bg-white custom-rounded-table">
  <!-- 表格内容不变 -->
</table>

这样就能实现带圆角的表格效果，同时保留Bootstrap的表格样式。

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