位置粘在头上

Question

如您所知， position: sticky; 已登陆 Webkit（ 演示）。到目前为止，我可以看到这只适用于父元素。但我想知道我是否可以在带有表格的滚动 div 中使用它。

因此它需要“监听” div 的滚动事件，而不是 table 的滚动事件。

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

原文由 Willem de Wit 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Position sticky on thead th 工作在 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 日发表）_

原文由 Evolve 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

If you need sticky header for chrome only then you can set position: sticky; top: some_value ( top property is mandatory) for td element in a thead element .

看：

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

带有固定标题的表格

原文由 bioform 发布，翻译遵循 CC BY-SA 3.0 许可协议