Question

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

Answer 1

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

Answer 2

如果您认真对待“辅助功能”，那么两个表格不可行，因为它违反了规则。

在纯CSS中有很多方法可以做到这一点，但要让它在所有浏览器中运行都是一件令人头痛的问题。网上有一些例子，但是如果没有调整，它们并不是100％与IE一起工作。

我目前正在开发一个仅限CSS的版本，这已经非常接近：http://www.coderanch.com/t/431995/HTML-JavaScript/Table-with-fixed-header-scolling#1918825

在IE8rc1中不起作用，IE6 / 7有边框问题，你必须忍受在FF与IE中看起来不同的滚动条。

Answer 3

使用FireFox，你可以把style =“height：200px; overflow-y：auto”但是为了拥有与所有主流浏览器兼容的纯CSS版本，我使用this example因为IE不支持在tbody或thead中的syles。

Answer 4

我提出了一种解决方案，它结合了前面提到的两种解决方案。它使用jQuery和两个表，一个用于标题，一个用于内容。标头表设置为100％的宽度，没有设置列宽。在内容表的底部，定义了一行以匹配标题表和设置的列宽。此行被隐藏，因此未显示，但保留列宽。

对于这个例子，我给我的标题行写了一个'Header1'的ID和底行和'Header2'的ID。我还将内容表包装在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

});

我已经在IE 6,7＆amp; 8，Windows XP上的Firefox 3.0.1.4，Chrome 3.0.195.25，Opera 10和Safari 3.2.2。

Answer 5

我过去使用CSS为我的表格中的height标记定义<TBODY>并使用overflow:auto。这是一段时间以前，我认为存在一些兼容性问题。我不记得它们究竟是什么，但这个解决方案可能适合你的问题。

Answer 6

最好的解决方案（用大量数据扩展的解决方案）是使用像aaron这样的2个表，顶部表有标题，底部表应该有标题作为最后一行（或页脚），但是不透明度为0，因此您无法看到它们。

这个底部的标题使得底部表格与顶部表格具有相同的列宽，使得事物排成一行。确保你的页眉和页脚的样式相同。

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

非常简单，实际上=）

Answer 7

按照通常的方式创建单个表以满足辅助功能问题。使用jQuery动态创建基于thead的新表（复制thead）并将其注入第一个表上方的页面并为其指定固定位置。当桌面的其余部分滚动时，它应该保持原位，但它仍然可以访问并禁用JavaScript。

Answer 8

您是否尝试过JQuery的这个插件？ http://plugins.jquery.com/project/floatobject 我相信这会做你想要的。查看演示@ http://amirharel.com/labs/fo/float_demo.html 干杯！

冻结TH标头和滚动数据

8 个答案: