html - 位置sticky和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元素是“定位的”，因此被绘制在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>

Answer 2

删除边框折叠怎么样？