圆角HTML表格行背景色圆角失效问题求助

问题核心是表格默认的border-collapse: collapse会让内部行/单元格的背景不受表格border-radius约束，导致背景色溢出圆角。直接给你可行的修改方案：

关键CSS调整 #

1. 给表格设置border-collapse: separate、border-spacing: 0和overflow: hidden，既保证单元格无缝排列，又能截断超出圆角的背景
2. 调整单元格边框样式，避免最后一行的边框和表格底部圆角冲突

修改后的完整代码示例 #

<!DOCTYPE html>
<html>
<head>
<style>
.custom-table {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  /* 核心修改 */
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

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

/* 奇偶行背景色 */
.custom-table tr:nth-child(even) {
  background-color: #f8f9fa;
}

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

.custom-table th {
  background-color: #ffffff;
  font-weight: 600;
}
</style>
</head>
<body>
<table class="custom-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>邮箱</th>
      <th>状态</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>zhangsan@example.com</td>
      <td>活跃</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>lisi@example.com</td>
      <td>活跃</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>wangwu@example.com</td>
      <td>离线</td>
    </tr>
  </tbody>
</table>
</body>
</html>

原理说明 #

• border-collapse: separate：取消边框合并模式，让表格的圆角能真正约束内部元素
• border-spacing: 0：消除单元格之间的空隙，保持表格紧凑的视觉效果
• overflow: hidden：截断所有超出表格圆角范围的内容，包括行的背景色

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