[英]Position sticky and background-color of thead cell hides outline of tbody
How do you prevent the red outline from being hidden by the green background-color of the th
and keep the border-collapse
? 如何防止红色轮廓被
th
的绿色背景颜色隐藏并保持border-collapse
? Is there a CSS spec that defines this behavior? 是否有定义此行为的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>
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. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index讨论了绘制元素的顺序。
position: sticky
elements are "positioned" so are painted on top of the position: static
tbody
element. position: sticky
元素被“定位”,因此被绘制在position: static
tbody
元素的顶部。 You can use z-index
to override this. 您可以使用
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>
如何消除边界崩溃?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.