如何解决border-collapse表格中分组行圆角边框断裂问题

我想给表格的特定行设置border-radius，结构如下：

<tr>带border-top-radius的行</tr>
<tr>包含若干td的普通行</tr>
<tr>包含若干td的普通行</tr>
<tr>包含若干td的普通行</tr>
<tr>带border-bottom-radius的行</tr>

该结构会重复出现，每个结构中的普通<tr>数量不固定，且表格必须设置border-collapse: collapse;。我尝试用<div>实现，但出现边框断裂的情况：

• 左侧边框：Cell 1和Cell 5处断裂
• 右侧边框：Cell 4和Cell 8处断裂

当前代码 #

CSS #

table {
  border-collapse: collapse;
}

td {
  border: 2px solid black;
  padding: 10px;
  height: 50px;
  width: 100px;
}

.footer > td:first-child {
  border-left: none;
  border-bottom: none;
  padding: 0;
}
.footer > td:last-child {
  border-right: none;
  border-bottom: none;
  padding: 0;
}

.footer > td:first-child > div {
  height: 100%;
  width: 100%;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  border-bottom-left-radius: 10px;
}
.footer > td:last-child > div {
  height: 100%;
  width: 100%;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  border-bottom-right-radius: 10px;
}

HTML #

<div>
  <table>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr class="footer">
      <td>
        <div>Cell 5</div>
      </td>
      <td>Cell 6</td>
      <td>Cell 7</td>
      <td>
        <div>Cell 8</div>
      </td>
    </tr>
  </table>
</div>

补充说明 #

“该结构会重复出现，每个结构中的普通<tr>数量不固定”指存在多个此类结构，不同结构中的普通<tr>数量不同，示例代码如下：

补充示例代码 #

CSS

table {
  border-collapse: collapse;
}
th {
  border: 2px solid black;
}
td {
  border: 2px solid black;
  padding: 5px;
  height: 30px;
  width: 100px;
}
.spacer > td {
  border: none;
  height: 10px;
}
.header > td:first-child {
  border-left: none;
  border-top: none;
  padding: 0;
}
.header > td:last-child {
  border-right: none;
  border-top: none;
  padding: 0;
}
.header > td:first-child > div {
  height: 100%;
  width: 100%;
  border-left: 2px solid black;
  border-top: 2px solid black;
  border-top-left-radius: 10px;
}
.header > td:last-child > div {
  height: 100%;
  width: 100%;
  border-right: 2px solid black;
  border-top: 2px solid black;
  border-top-right-radius: 10px;
}

.footer > td:first-child {
  border-left: none;
  border-bottom: none;
  padding: 0;
}
.footer > td:last-child {
  border-right: none;
  border-bottom: none;
  padding: 0;
}
.footer > td:first-child > div {
  height: 100%;
  width: 100%;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  border-bottom-left-radius: 10px;
}
.footer > td:last-child > div {
  height: 100%;
  width: 100%;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  border-bottom-right-radius: 10px;
}

HTML

<div>
  <table>
    <thead>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
    </thead>
    <tbody>
      <tr class="spacer">
        <td colspan="4"></td>
      </tr>
      <tr class="header">
        <td>
          <div>Cell</div>
        </td>
        <td>Cell</td>
        <td>Cell</td>
        <td>
          <div>Cell</div>
        </td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr class="footer">
        <td>
          <div>Cell</div>
        </td>
        <td>Cell</td>
        <td>Cell</td>
        <td>
          <div>Cell</div>
        </td>
      </tr>
      <tr class="spacer">
        <td colspan="4"></td>
      </tr>
      <tr class="header">
        <td>
          <div>Cell</div>
        </td>
        <td>Cell</td>
        <td>Cell</td>
        <td>
          <div>Cell</div>
        </td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr class="footer">
        <td>
          <div>Cell</div>
        </td>
        <td>Cell</td>
        <td>Cell</td>
        <td>
          <div>Cell</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

问题根源是border-collapse: collapse模式下单元格边框会合并，嵌套div的边框与原单元格边框未对齐，导致断裂。提供两种修复方案：

方法一：用clip-path实现圆角（无需额外div） #

直接给目标行的首尾单元格设置clip-path，保留border-collapse特性的同时实现圆角，不会出现边框断裂。

核心修改CSS：

table {
  border-collapse: collapse;
}

td {
  border: 2px solid black;
  padding: 10px;
  height: 50px;
  width: 100px;
}

/* 头部行圆角 */
.header > td:first-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 90%);
}
.header > td:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
}

/* 底部行圆角 */
.footer > td:first-child {
  clip-path: polygon(0 10px, 10px 0, 100% 0, 100% 100%, 0 100%);
}
.footer > td:last-child {
  clip-path: polygon(0 0, 90% 0, 100% 10px, 100% 100%, 0 100%);
}

/* 衔接中间行与首尾行的边框 */
.header + tr > td:first-child {
  border-top-left-radius: 0;
}
.header + tr > td:last-child {
  border-top-right-radius: 0;
}

对应HTML无需嵌套div，直接使用：

<tr class="header">
  <td>Cell</td>
  <td>Cell</td>
  <td>Cell</td>
  <td>Cell</td>
</tr>

方法二：调整div边框偏移（保留原div结构） #

给嵌套的div添加负边距，让div边框与外层td边框完全对齐，同时同步padding避免内容偏移：

修改后的.footer相关CSS：

.footer > td:first-child {
  border-left: none;
  border-bottom: none;
  padding: 0;
}
.footer > td:last-child {
  border-right: none;
  border-bottom: none;
  padding: 0;
}

.footer > td:first-child > div {
  height: 100%;
  width: 100%;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  border-bottom-left-radius: 10px;
  margin-left: -2px;
  margin-top: -2px;
  padding: 10px; /* 和原td的padding保持一致 */
}
.footer > td:last-child > div {
  height: 100%;
  width: 100%;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  border-bottom-right-radius: 10px;
  margin-right: -2px;
  margin-top: -2px;
  padding: 10px; /* 和原td的padding保持一致 */
}

头部行的div也需要做相同的偏移调整，即可让边框完美衔接。

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