如果没有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 > <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody > Data here </tbody></table>
这种方法有很多问题，例如，确保精确的像素宽度，因为表格是如此可爱，以至于不同的浏览器会根据计算结果不同地分配像素，而您根本无法（AFAIK）保证在所有情况下均能完美分配。如果表中有边框，这将变得非常明显。
我采取了另一种方法，并说了螺丝桌，因为您不能保证这一点。我用div模仿表。这也存在放置行和列的问题（主要是因为浮动存在问题，使用内嵌块不适用于IE7，因此，这确实让我不得不使用绝对定位将它们放置在适当的位置）。
有一个制作Slick Grid的人，它具有与我非常相似的方法，您可以使用一个很好的（尽管很复杂）示例来实现这一目标。
