粘贴在thead上

Question

您可能知道,position: sticky;已经登陆Webkit(演示).到目前为止,我可以看到这只适用于父元素.但是我想知道我是否可以在带有表格的滚动div中使用它.

所以它需要'监听'滚动事件,而div不是table.

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

Answer 1

位置上粘THEAD日在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; }

截至2018年3月,现代浏览器的支持几乎都是支持ref:https://caniuse.com/#feat=css-sticky

这个奖励归功于@ ctf0(参考评论发表于2017年12月3日)

Answer 2

如果您只需要chrome的标头,那么您可以为元素中的元素设置position: sticky; top: some_value(top属性是必需的).tdthead

看到:

<table border=1>
  <thead>
    <tr>
      <td style='position: sticky; top: -1px;background: red'>Sticky Column</td>
      <td>Simple column</td>
    </tr>
  </thead>

有一个stiky标头的桌子

Answer 3

position: sticky 不适用于表元素(只要它们的display属性以其开头table-),因为表不是规范的一部分:

其他模块中描述了其他类型的布局,例如表格,"浮动"框,红宝石注释,网格布局,列和正常"流"内容的基本处理.