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

Question

How do you prevent the red outline from being hidden by the green background-color of the th and keep the border-collapse? Is there a CSS spec that defines this behavior?

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>

if are using sticky, to let tbody scroll under thead, you better have thead on top of the rest. `thead{transform:translatey(-2px);` might be an option untill scrolling starts. — G-Cyrillus, Jun 01 '19 at 21:18
here is a demo for the idea and feedback https://codepen.io/anon/pen/OYropZ or https://codepen.io/anon/pen/NVeLjO using outline-offset — G-Cyrillus, Jun 01 '19 at 21:31
@G-Cyr Good solutions! I was wondering why the OP didn't specify `top: 0`. Presumably the idea is to have the header always show on top (as you scroll) regardless of how long the table is. Though wouldn't using something like `border: 2px solid red` be more effective than using outline? Is there some reason why anyone would use outline instead of border for this kind of styling? — gitMasi, Jun 02 '19 at 12:33
@gitMasi looks like the op is playing around with css , to be more familiar with it somehow i guess ;) outline can be drawn with an offset and is quiet an old rule. Should work everywhere It stands on top. box-shadow:inset can also fake a border, but stands under ... — G-Cyrillus, Jun 02 '19 at 12:37
@gitMasi @G-Cyr the benefit with `outline` is that it never takes up space and maybe it is better with accessibility? What would be preferred for a selected table row? — Josh Unger, Jun 02 '19 at 13:25
@gitMasi I added `top: 0` to clarify sticky usage, good point. — Josh Unger, Jun 02 '19 at 13:39
@JoshUnger Well I understand the differences between the two but I guess I am just thinking too narrowly about this particular situation. Without the context of a full page it just looks like we're setting a border that isn't changing. Also, outline doesn't take up space, but you still have to account for it in the page layout. If you use `box-sizing: border-box` it's really easy to account for the space a border takes up. Anyway, I'm not trying to say that any of this is wrong. I'm just curious about the use case. I'm trying to learn new things myself, so this has been a useful thread! — gitMasi, Jun 02 '19 at 13:44

score 1 · Accepted Answer · edited Jun 01 '19 at 21:08

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index talks about the order in which elements are painted. position: sticky elements are "positioned" so are painted on top of the position: static tbody element. You can use z-index to override this.

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

1 Answers1