时尚的风格,在表格标题滚动到顶部后浮动

Stylish style to float the table header after it's been scrolled on top

提问人:doobsky 提问时间:5/8/2022 更新时间:5/8/2022 访问量:69

问:

我试图为自己写一页有点时尚的风格,以便于阅读。
有问题的页面 https://satisfactory.fandom.com/wiki/Hard_Drive
我想要实现的是将此表的顶行(带有“备用名称”,“产品”等)enter image description here的行为类似于顶部wikia导航栏 - 我希望它在它的位置上,直到它被向下滚动,然后保持在顶部 - 有点像在电子表格中冻结一行。

应该做我想做的事,但没有任何改变。我试过看看我是否针对正确的元素,并且背景颜色发生了变化。position: sticky;background-color

这是我尝试的方式

table#alternateRecipesTable th {
    position:sticky!important;
    top: 0px!important;
}

我正在使用带有手写笔 1.5.21 的 firefox 100。

谢谢。

HTML CSS 时尚

评论

0赞 Dave Pritlove 5/8/2022
虽然我不认为它能回答你的问题,但这里有一个类似的问题对此进行了一些讨论:stackoverflow.com/questions/44001954/......这可能有助于你修改你的实现,使其有效。如果您无法获得合适的表格样式来根据需要应用粘性,您是否考虑过模拟具有 css 网格布局的表格?

答:

1赞 Martin Lévai 5/8/2022 #1

设置 CSS 属性的计划是正确的。但是,要按预期工作,不能有带有 的父元素。position: stickyoverflow: hidden

如果将 设置为表的头单元格,则还需要检查每个父元素并取消设置该属性,否则它将不起作用。position: stickyoverflow: hidden

评论

0赞 doobsky 5/8/2022
谢谢,设置成功了。我试图将它应用于指定的东西,但将其设置为所有内容 (*) 似乎不会破坏任何东西并且就像我想要的那样工作。谢谢。overflow-x:visible!important;