Javascript 冻结标题和滚动数据

我有一个html表格，我想冻结标题行th标记以滚动数据。我怎么能做到？我需要使用Dom吗？

---

谢谢

我的解决方案是使用两个表并固定列宽。下表位于可滚动的div中，没有标题。

我过去使用CSS为表上的

标记定义

高度，并使用
溢出：自动
。这是很久以前的事了，我认为在兼容性方面存在一些问题。我不记得它们到底是什么，但这个解决方案可能会解决您的问题。
最好的解决方案（可以缩放大量数据的解决方案）是使用两个表，如aaron所说，顶部的表有页眉，底部的表应该有页眉作为最后一行（或页脚），但不透明度为0，这样你就看不见他们了

这样，底部的标题使底部表格与顶部表格具有相同的列宽，从而使内容排列整齐。确保页眉和页脚的样式相同

您还必须创建一个单独的滚动条，用于垂直滚动到表格右侧，否则滚动条将弄乱您的宽度。添加一个滚动事件侦听器，将表格的scrolltop设置为滚动条的scrolltop，并将滚动条的大小调整为与表格相同的高度

这很容易，实际上=）
如果你认真对待可访问性，两个表是不可取的，因为它违反了规则

在纯CSS中有很多方法可以做到这一点，但要让它在所有浏览器中都能工作是一件令人头痛的事情。网络上有一些例子，但它们并不是100%使用IE而不进行调整

我目前正在开发一个仅使用CSS的版本，这一点非常接近：

在IE8rc1中还不起作用，IE6/7有一个边界问题，你不得不面对FF与IE中滚动条的不同。在FireFox中，你可以使用style=“height:200px；overflow-y:auto”，但要有一个与所有主要浏览器兼容的纯CSS版本，自从IE不支持tbody或thead中的syles以来，我一直使用它。
像通常那样创建一个表，以满足可访问性问题。使用jQuery（复制thead）基于thead动态创建一个新表，并将其注入到第一个表上方的页面中，并为其指定固定位置。当表的其余部分滚动时，它应该保持在原来的位置，但它仍然可以访问，并且可以在禁用JavaScript的情况下工作。
我提出了一个解决方案，该解决方案结合了前面提到的两个解决方案。它使用jQuery和两个表，一个用于标题，一个用于内容。标题表的宽度设置为100%，但未设置列宽。在内容表的底部，有一行定义为将标题表与设置的列宽相匹配。此行是隐藏的，因此不显示，但保留列宽

对于这个例子，我给了标题行一个ID“Header1”，给了底部行一个ID“Header2”。此外，我还将内容表包装在一个ID为“scrollTable”的div中

我在CSS文件中为scrollTable ID设置了样式，请参见以下内容：

    #scrollTable {
 height:250px;
 overflow-x:hidden;
 overflow-y:scroll;
    }

现在来看jQuery部分。基本上，我在这里要做的是获取最底层行列的宽度，并将标题列设置为匹配。我拉伸标题最后一列的宽度，使其适合滚动条的顶部。见下面的代码：

   $(document).ready(function(){
 var maxWidth = $('#Header1').width();    // Get max row Width
 $('#Header2 th').each(function(i) {     // Set col headers widths to to match col widths 
      var width = $(this).width();
      $('#Header1 th').eq(i).width(width);
 });

 var blankSpace = maxWidth - $('#Header1').width();               // Calculate extra space
 $('#Header1 th:last').width( $('#Header1 th:last').width() + blankSpace );  // Stretch last header column to fill remaining space

});

我已经在Windows XP上的IE 6、7和8、Firefox 3.0.1.4、Chrome 3.0.195.25、Opera 10和Safari 3.2.2上成功地测试了这个插件。
您从JQuery尝试过这个插件吗？
我相信这正是你想要的。查看演示@
干杯
 如果我的记忆很好，这在firefox中有效，但在IE中不起作用，那么你必须在IE.FWIW中使用css表达式，这个示例在Chrome中似乎没有正确地将列与标题对齐。如果你想修正列宽，这很好，但我们几乎总是想让列自动调整它们的宽度。在这种情况下，让两个表的列都找到它们的自然宽度，然后使用一个小JavaScript将最大值设置为两者。这也是我得出的结论。事实上，我看到了一个高效的JQuery示例，它就是这样做的（我肯定我在这里找到了这个示例）