如何用CSS解决表格单元格边框重叠变粗且保留圆角

问题原因 #

使用border-collapse: separate且border-spacing: 0时，相邻单元格的边框会叠加显示，导致相交处视觉上更粗更深；而border-collapse: collapse会让边框合并，但无法支持单元格圆角。

可行解决方案 #

方案1：单边边框控制（无需额外HTML） #

通过给单元格设置单边边框避免重叠，同时保留圆角样式：

.custom-table-2 {
  border-collapse: separate;
  border-spacing: 0;
}

/* 每个单元格仅保留顶部和左侧边框 */
.custom-table-2 td {
  border-top: 1px solid #00953B;
  border-left: 1px solid #00953B;
}

/* 最后一行单元格添加底部边框 */
.custom-table-2 tr:last-child td {
  border-bottom: 1px solid #00953B;
}

/* 最后一列单元格添加右侧边框 */
.custom-table-2 td:last-child {
  border-right: 1px solid #00953B;
}

/* 保留原有圆角及特殊单元格样式 */
.custom-table-2 tr:first-child td:first-child {
  border: 0;
}

.custom-table-2 tr:nth-child(2) td:first-child {
  border-top-left-radius: 16px;
}

.custom-table-2 tr:first-child td:nth-child(2) {
  border-top-left-radius: 16px;
}

.custom-table-2 tr:first-child td:last-child {
  border-top-right-radius: 16px;
}

.custom-table-2 td:nth-child(2) {
  background-color: #7CCB99;
}

方案2：外层容器包裹（代码更简洁） #

给表格套一个外层容器，利用容器的圆角和overflow: hidden隐藏表格直角，同时用border-collapse: collapse解决边框重叠：

HTML结构修改

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

CSS代码

.table-container {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #00953B; /* 表格外层边框 */
}

.custom-table-2 {
  border-collapse: collapse;
  width: 100%;
}

.custom-table-2 td {
  border: 1px solid #00953B;
}

.custom-table-2 tr:first-child td:first-child {
  border: 0;
}

.custom-table-2 td:nth-child(2) {
  background-color: #7CCB99;
}

方案对比 #

• 方案1：无需额外HTML元素，可精确控制局部边框和圆角，适合复杂自定义场景。
• 方案2：代码更简洁，适合整体圆角的常规表格场景，局部特殊样式灵活性稍弱。

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