为何无法同时在表格中使用Border-radius和Border-collapse属性？

当设置border-collapse: collapse时，浏览器会合并表格单元格的边框，这会导致border-radius无法生效——因为合并后的边框没有独立的边角可以应用圆角。下面是两种实用的替代方案：

方案1：用border-spacing+overflow:hidden实现（简洁首选） #

放弃border-collapse: collapse，改用border-spacing: 0让单元格边框紧贴，再通过表格的overflow: hidden来裁剪内部元素，从而实现圆角效果。

示例代码：

<table class="rounded-table">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
  </tbody>
</table>

.rounded-table {
  border-spacing: 0; /* 替代border-collapse，让单元格边框紧贴 */
  border-radius: 8px; /* 表格整体圆角 */
  overflow: hidden; /* 关键：裁剪内部单元格，避免边框超出圆角 */
  width: 100%;
  border: 1px solid #ddd; /* 可选：给表格加外边框 */
}

.rounded-table th,
.rounded-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.rounded-table th {
  background-color: #f8f9fa;
}

.rounded-table tbody tr:last-child td {
  border-bottom: none; /* 去掉最后一行的底部边框 */
}

方案2：手动为边角单元格设置圆角（兼容性更强） #

如果需要兼容对overflow: hidden支持不佳的旧浏览器，可以直接为表格四个角落的单元格单独设置圆角，同时调整边框避免重复。

示例CSS：

.rounded-table {
  border-spacing: 0;
  width: 100%;
}

.rounded-table th,
.rounded-table td {
  border: 1px solid #ddd;
  padding: 12px 16px;
  text-align: left;
}

.rounded-table th {
  background-color: #f8f9fa;
}

/* 表头圆角 */
.rounded-table thead tr th:first-child {
  border-top-left-radius: 8px;
}
.rounded-table thead tr th:last-child {
  border-top-right-radius: 8px;
}

/* 表体最后一行圆角 */
.rounded-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}
.rounded-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

/* 移除重复边框，模拟合并效果 */
.rounded-table th:not(:last-child),
.rounded-table td:not(:last-child) {
  border-right: none;
}
.rounded-table tbody tr:not(:last-child) td {
  border-bottom: none;
}

注意事项 #

• 如果表格包含tfoot，需要为tfoot的对应单元格添加底部圆角样式
• 方案1在现代浏览器中表现稳定，方案2更适合IE等旧环境

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