52

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

所以它需要“监听” 的滚动事件，而div不是table.

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

4

5 回答 5

109

在 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日发表）

于 2018-03-14T05:01:44.480 回答
14

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

带有粘性标题的表

于 2017-05-10T14:33:00.660 回答
11

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

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

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

于 2015-05-03T17:37:45.387 回答
2

事实证明，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

于 2012-09-17T09:27:06.093 回答
1

警告：

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

于 2019-06-21T00:01:07.713 回答