thead 单元格的位置粘性和背景颜色隐藏了 tbody 的轮廓

Question

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

table {
  border-collapse: collapse
}

tbody {
  outline: solid red;
}

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

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

Answer 1

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index讲的是元素绘制的顺序。 position: sticky 元素是 "positioned"，因此绘制在 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>

Position sticky and background-color of thead cell hides outline of tbody