Положение липкое и цвет фона ячейки thead скрывает контур тела

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

Как насчет удаления границы-коллапса?