如何让表格Sticky Header的边框显示在合并列背景之上？

我有一个带有Sticky Header的表格，部分行包含跨整行的列（设置了colspan属性）并添加了背景色。滚动页面时，该背景色会覆盖thead单元格的边框。请问是否有办法让边框显示在单元格背景色之上？

原代码 #

CSS #

table {
  border-collapse: collapse;
  position: relative;
}

table, th, td {
  border: 2px solid black;
}

th, td {
  padding: .5rem 1rem;
}

td[colspan] {
  text-align: center;
  background-color: red;
  color: white;
}

table thead:first-child th {
  position: sticky;
  top: 0;
  background-color: white;
}

HTML #

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row1 col 1</td>
      <td>row1 col 2</td>
      <td>row1 col 3</td>
    </tr>
    <tr>
      <td colspan="3">row2 col 1</td>
    </tr>
    <tr>
      <td>row3 col 1</td>
      <td>row3 col 2</td>
      <td>row3 col 3</td>
    </tr>
    <tr>
      <td>row4 col 1</td>
      <td>row4 col 2</td>
      <td>row4 col 3</td>
    </tr>
    <tr>
      <td>row5 col 1</td>
      <td>row5 col 2</td>
      <td>row5 col 3</td>
    </tr>
    <tr>
      <td>row6 col 1</td>
      <td>row6 col 2</td>
      <td>row6 col 3</td>
    </tr>
    <tr>
      <td>row7 col 1</td>
      <td>row7 col 2</td>
      <td>row7 col 3</td>
    </tr>
    <tr>
      <td>row8 col 1</td>
      <td>row8 col 2</td>
      <td>row8 col 3</td>
    </tr>
    <tr>
      <td>row9 col 1</td>
      <td>row9 col 2</td>
      <td>row9 col 3</td>
    </tr>
    <tr>
      <td>row10 col 1</td>
      <td>row10 col 2</td>
      <td>row10 col 3</td>
    </tr>
    <tr>
      <td>row11 col 1</td>
      <td>row11 col 2</td>
      <td>row11 col 3</td>
    </tr>
    <tr>
      <td>row12 col 1</td>
      <td>row12 col 2</td>
      <td>row12 col 3</td>
    </tr>
    <tr>
      <td>row13 col 1</td>
      <td>row13 col 2</td>
      <td>row13 col 3</td>
    </tr>
    <tr>
      <td>row14 col 1</td>
      <td>row14 col 2</td>
      <td>row14 col 3</td>
    </tr>
    <tr>
      <td>row15 col 1</td>
      <td>row15 col 2</td>
      <td>row15 col 3</td>
    </tr>
  </tbody>
</table>

解决方案 #

问题根源在于border-collapse: collapse模式下，表格边框属于表格本身而非单个单元格，当跨行背景单元格滚动到表头下方时，会覆盖表格边框。以下两种方法可解决：

方法一：用box-shadow模拟表头边框 #

通过box-shadow实现表头底部边框，同时设置表头z-index确保层级高于tbody内容：

table {
  border-collapse: collapse;
  position: relative;
}

table, td {
  border: 2px solid black;
}

th {
  border: 2px solid black;
  border-bottom: none;
}

th, td {
  padding: .5rem 1rem;
}

td[colspan] {
  text-align: center;
  background-color: red;
  color: white;
}

table thead:first-child th {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 1;
  box-shadow: inset 0 -2px 0 black;
}

方法二：改用border-spacing布局 #

放弃border-collapse，改用border-spacing: 0，单独给单元格设置边框：

table {
  border-spacing: 0;
  position: relative;
  border: 2px solid black;
}

th, td {
  border: 2px solid black;
  border-top: none;
  border-left: none;
  padding: .5rem 1rem;
}

th:first-child, td:first-child {
  border-left: 2px solid black;
}

th {
  border-top: 2px solid black;
}

td[colspan] {
  text-align: center;
  background-color: red;
  color: white;
}

table thead:first-child th {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 1;
}

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