如您所知,它position:sticky;已落入Webkit(demo)中。到目前为止,我只能看到它仅在父元素内有效。但是我想知道是否可以在带有表的滚动div中使用它。
position:sticky;
因此,它需要在的滚动事件“听” div,不是table。
div
table
我知道我可以使用javascript和绝对定位来做到这一点,但我想知道是否sticky-positioning会支持这一点。
sticky-positioning
在2018 年的 工作日上保持 粘性!
在样式表中,只需添加以下一行:
thead th { position: sticky; top: 0; }
您的表将需要包含 thead 和 th 才能进行样式设置。
<table> <thead> <tr> <th>column 1</th> <th>column 2</th> <th>column 3</th> <th>column 4</th> </tr> </thead> <tbody> // your body code </tbody> </table>
另外,如果 thead中 有多行,则可以选择第一个保持粘性:
thead tr:first-child th { position: sticky; top: 0; }