为何无法同时使用border-radius与border-collapse？有无解决方法？

当使用border-collapse: collapse时，表格的border-radius确实不会生效——这是因为边框合并后，浏览器无法区分表格本身的边框和单元格的边框，自然没法渲染圆角。下面是两种实用的兼容方案：

方案一：用border-spacing模拟合并效果（推荐） #

放弃border-collapse: collapse，改用border-spacing: 0，配合overflow: hidden来实现圆角，同时保持边框合并的视觉效果：

table {
  border: 1px solid #ddd;
  border-radius: 8px;
  border-spacing: 0; /* 去除单元格间距 */
  overflow: hidden; /* 隐藏单元格超出表格圆角的边框 */
  width: 100%;
}

th, td {
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 10px 15px;
  text-align: left;
}

/* 去掉最后一列的右边框 */
th:last-child, td:last-child {
  border-right: none;
}

/* 去掉最后一行的下边框 */
tr:last-child th, tr:last-child td {
  border-bottom: none;
}

原理是：通过border-spacing: 0让单元格紧挨着，给表格设置整体边框和圆角后，用overflow: hidden把单元格超出圆角的部分切掉。最后给单元格只加右侧和底部边框，再去掉最后一行/列的多余边框，视觉上就和border-collapse的效果完全一致。

方案二：给表格套一层容器 #

如果必须保留border-collapse: collapse，可以给表格外面加一个带圆角的容器，利用容器的overflow: hidden来实现圆角效果：

<div class="table-container">
  <table>
    <!-- 表格内容 -->
  </table>
</div>

.table-container {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ddd; /* 容器边框替代表格边框 */
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 10px 15px;
}

这种方法要注意容器的边框和表格的边框颜色、宽度保持一致，避免出现双重边框的问题。

内容的提问来源于stack exchange，提问作者p charan sai