仅冻结 html 表格的顶行（固定表格标题滚动）

Question

我想制作一个顶行冻结的 html 表格（这样当您垂直向下滚动时，您总能看到它）。

有没有聪明的方法可以在没有 javascript 的情况下实现这一目标？

请注意，我不需要冻结左列。

原文由 Davis Dimitriov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这称为固定标题滚动。有许多记录在案的方法：

http://www.imaputz.com/cssStuff/bigFourVersion.html

如果没有 JavaScript，您将无法有效地实现这一目标……特别是如果您需要跨浏览器支持。

您采用的任何方法都有很多问题，尤其是在跨浏览器/版本支持方面。

编辑：

即使不是要修复的表头，而是第一行数据，概念还是一样的。我不是你所指的 100%。

额外的想法 是我的公司派我研究一个可以在 IE7+、Firefox 和 Chrome 中运行的解决方案。

经过数月的搜索、尝试和挫折，它真的归结为一个根本问题。在大多数情况下，为了获得固定的标题，您需要实现固定高度/宽度的列，因为大多数解决方案涉及使用两个单独的表，一个用于标题，它将浮动并留在包含数据的第二个表上.

 //float this one right over second table
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
</table>

<table>
//Data
</table>

一些尝试的另一种方法是使用 tbody 和 thead 标签，但这也有缺陷，因为 IE 不允许你在 tbody 上放置滚动条，这意味着你不能限制它的高度（IMO 太愚蠢了）。

 <table>
  <thead style="do some stuff to fix its position">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  </thead>
  <tbody style="No scrolling allowed here!">
     Data here
  </tbody>
</table>

这种方法有很多问题，例如确保精确的像素宽度，因为表格非常可爱，因为不同的浏览器会根据计算以不同方式分配像素，而您根本无法（AFAIK）保证在所有情况下分配都是完美的。如果您的表格中有边框，它会变得非常明显。

我采取了不同的方法并说螺丝表，因为你不能做出这个保证。我使用 div 来模拟表格。这也有定位行和列的问题（主要是因为浮动有问题，使用内联块对 IE7 不起作用，所以它真的让我不得不使用绝对定位将它们放在适当的位置）。

有人制作了 Slick Grid，它与我的方法非常相似，您可以使用一个很好的（尽管很复杂）示例来实现这一点。

https://github.com/6pac/SlickGrid/wiki

原文由 Matthew Cox 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我知道这有几个答案，但这些都没有真正帮助我。我发现 这篇文章 解释了为什么我的 sticky 没有按预期运行。

基本上，您不能在 <thead> 或 <tr> 元素上使用 position: sticky; --- 。但是，它们可以用于 <th> 。

让它工作所需的最少代码如下：

 table {
  text-align: left;
  position: relative;
}

th {
  background: white;
  position: sticky;
  top: 0;
}

将表设置为相对 <th> 可以设置为粘性，顶部为 0

注意：有必要用最大高度的 div 包裹表格：

 <div id="managerTable" >
...
</div>

在哪里：

 #managerTable {
    max-height: 500px;
    overflow: auto;
}

原文由 Joe 发布，翻译遵循 CC BY-SA 4.0 许可协议