位置粘性和背景顏色的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

如何消除邊界崩潰？