Question

当前，我正在使用以下html + css来获取粘性表头：

<html>
<body>
  <table class="table table-striped" style="display: block;">
      <thead style="position: sticky;top:6.833rem;; background-color: #e5e5e5;z-index: 10;">
          <tr>
              <th>Heading 1</th>
              <th>Long Heading  </th>
              <th>Heading 2</th>
              <th>Very Very Very Very Long Heading</th>
              <th>Very Long Heading</th>
          </tr>
      </thead>
      <tbody style="table-layout: fixed;">
          <tr>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
          </tr>
      </tbody>
  </table>
</body>
</html>

这在Firefox中完全正常。但是当我在Chrome中运行相同的代码时，thead不再具有粘性。

如果我添加

display: block;

使用它的样式，但是标题和内容列的宽度不再相同。

有什么建议吗？

Answer 1

这应该清楚地说明如何使用粘性。也许您必须根据需要调整大小。为了说明目的，我还在之间添加了一个div填充。

table {
  top: 50px;
  position: sticky;
  background-color: #e5e5e5;
}

body{
  height: 2000px;
}

#fill{
  height: 150px;
  width: 100%;
}

 <div id="fill"></div>
  <table>
      <thead >
          <tr>
              <th>Heading 1</th>
              <th>Long Heading  </th>
              <th>Heading 2</th>
              <th>Very Very Very Very Long Heading</th>
              <th>Very Long Heading</th>
          </tr>
      </thead>
      <tbody style="table-layout: fixed;">
          <tr>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
          </tr>
      </tbody>
  </table>

请注意，我给了主体一个高度，以表明它在滚动时会粘住。

Answer 2

我找到了解决方法。

Chrome不支持thead / thr的粘性。因此，我将整个样式移至每个元素。就是这样。

在这里找到解决方案： CSS-Only Sticky Table Headers In Chrome

带有CSS的粘桌子头

2 个答案: