Question

是否可以仅使用div和css在HTML表格上获得position: sticky效果？

显然，如果我尝试将position: sticky规则添加到已包含display: table-header-group规则的标头中，则粘滞效果为空。

HTML

<div class="container">
    <div class="header-row">
        <div class="header>Header</div>
        [...]
    </div>
    <div class="body-row">
        <div class="body>Content</div>
        [...]
    </div>
</div>

CSS

.container {
  display: table;
}

.header-row {
  display: table-header-group;
  position: sticky;
  top: 0;
}

.body-row {
  display: table-row;
}

.body, .header {
  display: table-cell;
}

活小提琴：https://jsfiddle.net/Lc0rE/9fxobxb0/1/

Answer 1

这个问题可能有几年了，但我遇到了同样的问题。特别是现在position: sticky是一个广泛采用的定位元素。

我通过在表头和表格中添加一个浮点数来解决这个问题。表行。

.header-row {
  display: table-header-group;
  position: sticky;
  top: 0;
  float: left;
}

.body-row {
  display: table-row;
  float: left;
}

https://jsfiddle.net/58zes8rr/

使用Flexbox可能有一个更清洁的选择（可能还没有广泛支持）。

Answer 2

我首先尝试了上面的答案，并在我的css定义中添加了float，但是这消除了我所有的动态列宽度，并且要求我为所有列指定固定宽度。没有选择。

与其他所有人一样，我的第一个直觉是在Row本身上设置粘性，但这没有用。当我向标题行中的每个单元格添加粘性时，它可以正常工作。

Fiddle Example

（TLDR）

每行标题行：

    .td.searchResultHeader {
        position:sticky;
        top:0;
    }

position：div表中的粘性

HTML

CSS

2 个答案:

（TLDR）