将粘性贴在头上

问题描述 投票：0回答：7

您可能知道，

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

所以它需要“监听”

div
的滚动事件，而不是
table
。

我知道我可以使用 javascript 和绝对定位来做到这一点，但我想知道 

sticky-positioning
是否支持这一点。

html css
7个回答
131
投票

在 

thead th
上粘贴位置在 2018 年有效！

table { border-spacing: 1px; }
th, td { background: white; color: black; border: 1px solid black; }
thead th { position: sticky; top: 0; }
<table>
    <thead>
        <tr> <th>column 1 <th>column 2 <th>column 3 <th>column 4
    </thead>
    <tbody>
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
    </tbody>
</table>

此外，如果 

<thead>
中有多行，您可以选择第一行保持粘性：

thead tr:first-child th { position: sticky; top: 0; }

截至 2018 年 3 月，现代浏览器几乎都支持 参考：https://caniuse.com/#feat=css-sticky

此内容归功于@ctf0（参考评论于 2017 年 12 月 3 日发表）

14
投票

如果您只需要 chrome 的粘性标题，那么您可以在 

position: sticky; top: some_value
元素中为 
top
元素设置 
td
（
thead
属性是强制的）。

参见：

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

带有粘性标题的表格

11
投票

position: sticky
不适用于表格元素（只要它们的 display
 属性以
table-
 开头），因为表格不是
规范的一部分：

其他类型的布局，例如表格、“浮动”框、Ruby 注释、网格布局、列以及正常“流”内容的基本处理，在其他模块中进行了描述。

编辑：截至 2019 年 7 月，根据 https://caniuse.com/#feat=css-sticky Firefox 支持此功能，Chrome 至少支持 <th>

 标签。

7
投票
为

thead设置position:sticky就够了，无需为th设置 :

table.StickyHeader thead { position: sticky; top: 0px; } 
测试于：


边缘105.0.1343.42，
火狐浏览器105.0，
铬105.0.5195.127，
歌剧 91.0.4516.16


但是，当 
thead 的位置设置为粘性且 th 具有背景颜色时，Firefox 无法渲染 th 的边框：

table.StickyHeader th {
    border: 1px solid black;
    padding: 5px;
    background-color: gold;
    text-align: center;
}

火狐

Edge、Chrome、Opera
    



    

    
    
    

    

        

            

                

                    
4
投票

                    
                

            

        

        
事实证明，
position: sticky
仅适用于窗口，不适用于滚动div。



我创建了一个
测试用例，其中包含一个带有表头的很长的表格：






h1 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
}

div.testTable {
  height: 200px;
  overflow: auto;
}

table.stickyHead thead {
  position: -webkit-sticky;
  top: 0px;
  background: grey;
}

table.stickyHead td,
table.stickyHead th {
  padding: 2px 3px;
}
<h1>Position sticky</h1>
<div class="testTable">
  <table class="stickyHead">
    <thead>
      <tr>
        <th>column 1</th>
        <th>column 2</th>
        <th>column 3</th>
        <th>column 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</div>







如您所见，如果您去除包装纸上的溢出物并使窗户不那么高，则桌头会粘在窗户的顶部。我不适用于包装
div
即使你给了
div
position: relative

    



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
如果它不起作用，向 head 或 th 添加 z 索引可能会有所帮助。

    



    

    
    
    

    

        

            

                

                    
-1
投票

                    
                

            

        

        
注意：


position:sticky
 2019 年不再在 Google Chrome 上使用，请尝试使用 
fixed
 或 
display:inline-block

    

	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.