Question

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

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

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

Answer 1

位于 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月，现代浏览器几乎都支持参考：https://caniuse.com/#feat=css-sticky

此信用证归功于@ ctf0（参考评论于2017年12月3日发布）

Answer 2

如果您只需要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>

table with a stiky header

Answer 3

#TABLE 1: ACADEMIC > cbind(male=coef(mnl[["model1"]])[1,], + female=coef(mnl[["model2"]])[1,]) male female (Intercept) -3.23410968 -3.01401061 sesmiddle 1.15893835 0.17086744 seshigh 2.00007946 0.57690699 write 0.05464579 0.06598217 #TABLE 2: VOCATION > cbind(male=coef(mnl[["model1"]])[2,], + female=coef(mnl[["model2"]])[2,]) male female (Intercept) 3.69215046 1.57234796 sesmiddle 1.15573930 0.69043245 seshigh 0.67476976 -0.16955825 write -0.09640053 -0.03412729 对表格元素不起作用（只要其position: sticky属性以display开头），因为表格不属于{{3 }}：

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

Answer 4

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

我创建了一个test-case，其中包含一个带有表头的非常长的表：

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

我使用的CSS：

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

正如您所看到的，如果您从包装纸上移除溢出物并使您的窗户不那么高，则桌头会粘在窗户的顶部。即使您提出div div

，我也不适用于包裹position: relative

Answer 5

警告：

posotion：sticiky在2019年的Chrome浏览器中不再起作用，请尝试使用固定的替代方法或显示：inline-block

粘贴在thead上

5 个答案: