Thead细胞的位置粘滞和背景色隐藏了tbody的轮廓

Question

如何防止th的绿色背景颜色掩盖红色轮廓并保留border-collapse？是否有CSS规范定义了此行为？

table {
  border-collapse: collapse
}

tbody {
  outline: solid red;
}

thead tr th {
  background-color: green;
  position: sticky;
}

<table>
  <thead>
    <tr><th>header</th></tr>
  </thead>
  <tbody>
    <tr><td>content</td></tr>
  </tbody>
</table>

Answer 1

如何消除边界折叠？

Answer 2

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index讨论了元素绘制的顺序。 position: sticky元素是“定位”的，因此被绘制在position: static tbody元素的顶部。您可以使用z-index覆盖它。

table {
  border-collapse: collapse
}

tbody {
  outline: solid red;
}

thead tr th {
  background-color: green;
  position: sticky;
  z-index: -1;
}

<table>
  <thead>
    <tr><th>header</th></tr>
  </thead>
  <tbody>
    <tr><td>content</td></tr>
  </tbody>
</table>