对thead粘贴位置 [英] Position sticky on thead

问题描述

正如你可能知道的那样，位置：sticky; 已经登陆Webkit（ demo ）。
到目前为止，我可以看到这只适用于父元素。但我想知道是否可以在带有表格的滚动div中使用它。

所以它需要在 div 的滚动事件上监听，而不是 table 。

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

解决方案

em>在2018年工作！

在您的样式表中只需添加这一行：

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

显然你的表需要包含 thead 和

< thead>
< tr>
列1< / th>
列2< / th>
列3< th>
列4< / th>
< / tr>
< / thead>
< tbody>
//您的身体代码
< / tbody>
< / table>

截至2018年3月，在现代浏览器中的支持非常多
ref： https://caniuse.com/#feat=css-sticky

对于这一款，信用评价为@ ctf0（参考评论于2017年12月3日发布）

As you might know, position: sticky; has landed in Webkit (demo). So far I can see this only works within the parent element. But I'd like to know if I can use this in a scrolling div with a table.

So it needs to 'listen' on the scrolling event of the div, not the table.

I know I can do this with javascript and absolute positioning, but I was wondering if the sticky-positioning would support this.

解决方案

Position sticky on thead works in 2018!

In your stylesheets just add this one line:

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

Obviously your table will need to include thead and th for this to style.

<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>

As of March 2018 support is pretty much there across modern browsers ref: https://caniuse.com/#feat=css-sticky

Credit goes to @ctf0 for this one (ref comment made 3 Dec 2017)

这篇关于对thead粘贴位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！