小编典典

黏贴在广告上

css

如您所知,它position:sticky;已落入Webkit(demo)中。到目前为止,我只能看到它仅在父元素内有效。但是我想知道是否可以在带有表的滚动div中使用它。

因此,它需要在的滚动事件“听” div,不是table

我知道我可以使用javascript和绝对定位来做到这一点,但我想知道是否sticky-positioning会支持这一点。


阅读 309

收藏
2020-05-16

共1个答案

小编典典

在2018 年的 工作日上保持 粘性!

在样式表中,只需添加以下一行:

thead th { position: sticky; top: 0; }

您的表将需要包含 theadth 才能进行样式设置。

<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; }
2020-05-16