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

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