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> 

Answer 1

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> 

Answer 2

如何消除边界崩溃？