表格行背景色超出边框圆角问题如何解决？

问题表现：表格设置了border-radius，但最后一行的背景色在底部角落溢出，未遵循表格的圆角，单独给最后一行设置边框圆角也无法解决。

问题效果：

问题原因 #

当表格使用border-collapse: collapse时，内部行或单元格的背景会超出表格的border-radius范围，导致视觉上的溢出。

解决方法一：使用clip-path快速裁剪（推荐） #

给表格添加clip-path属性，强制将所有内容裁剪到表格的圆角范围内，无需修改其他结构：

修改后的CSS代码：

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
table {
  border-collapse: collapse;
  border: solid transparent 2px;
  border-radius: 12px;
  background-color: rgb(166, 89, 89);
  color: rgb(248, 215, 215);
  /* 新增裁剪规则，圆角值和表格保持一致 */
  clip-path: inset(0 round 12px);
}
table thead tr th {
  text-align: left;
  padding: 5px;
  font-size: 1rem;
  color: rgb(240, 240, 240);
}
table tbody tr td {
  font-size: 0.9rem;
  padding: 5px;
  text-align: left;
}
table tbody tr:last-child {
  background-color: rgba(0, 0, 255, 0.405);
}

解决方法二：改用border-collapse: separate自定义圆角 #

如果需要更灵活的边框样式，可以将表格的合并边框改为分离模式，手动设置表头和最后一行单元格的圆角：

修改后的CSS代码：

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
table {
  border-collapse: separate; /* 修改为分离边框 */
  border-spacing: 0; /* 消除单元格间距 */
  border: solid transparent 2px;
  border-radius: 12px;
  background-color: rgb(166, 89, 89);
  color: rgb(248, 215, 215);
}
table thead tr th {
  text-align: left;
  padding: 5px;
  font-size: 1rem;
  color: rgb(240, 240, 240);
  border-bottom: 1px solid rgba(248,215,215,0.3);
}
/* 表头顶部圆角 */
table thead tr th:first-child {
  border-top-left-radius: 12px;
}
table thead tr th:last-child {
  border-top-right-radius: 12px;
}
table tbody tr td {
  font-size: 0.9rem;
  padding: 5px;
  text-align: left;
  border-bottom: 1px solid rgba(248,215,215,0.3);
}
/* 最后一行底部圆角 */
table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}
table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}
/* 移除最后一行单元格的底部边框 */
table tbody tr:last-child td {
  border-bottom: none;
}
table tbody tr:last-child {
  background-color: rgba(0, 0, 255, 0.405);
}

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