冻结 TH 标题和滚动数据答案

【问题标题】：Freeze TH header and scrolling data冻结 TH 标题和滚动数据
【发布时间】：2009-03-13 15:46:45
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

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

【讨论】：

如果您想固定列宽，这很好，但我们几乎总是希望让列自动缩放它们的宽度。
在这种情况下，让两个表的列找到它们的自然宽度，然后使用一个小的 JavaScript 将最大值设置为两者。
这也是我得出的结论。事实上，我已经看到了一个高效的 JQuery 示例（我确定我在 SO 的某个地方找到了它）acatalept.com/common/test/fixed-table.html

【解决方案2】：

如果您认真对待可访问性，那么两张表是不可行的，因为它违反了规则。

在纯 CSS 中有很多方法可以做到这一点，但让它在所有浏览器中都能工作是一件令人头疼的事情。网上有一些例子，但它们并非都在没有调整的情况下在 IE 上 100% 工作。

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

在 IE8rc1 中还不能工作，IE6/7 有一个边框问题，你必须忍受滚动条在 FF 和 IE 中看起来不同。

【讨论】：

【解决方案3】：

使用 FireFox，你可以把 style="height: 200px;overflow-y: auto" 但是为了有一个兼容所有主流浏览器的纯 CSS 版本，我使用 this example，因为 IE 不支持 syles tbody 或头。

【讨论】：

FWIW，此示例似乎无法在 Chrome 中正确地将列与标题对齐。

【解决方案4】：

我想出了一个解决方案，它结合了前面提到的两个解决方案。它使用 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 上成功测试。

【讨论】：

【解决方案5】：

我过去曾使用 CSS 完成此操作，方法是为我的桌子上的 <TBODY> 标记定义 height，并使用 overflow:auto。这是不久前的事情，我认为存在一些兼容性问题。我不记得它们是什么，但这个解决方案可能会解决你的问题。

【讨论】：

如果我没记错的话，它在 Firefox 中有效，但在 IE 中无效，您必须在 IE 中使用 css 表达式。

【解决方案6】：

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

底部的标题使底部表格的列宽与顶部表格的列宽相同，从而使事情排成一行。确保页眉和页脚的样式相同。

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

其实很简单=)

【讨论】：

【解决方案7】：

像往常一样创建一个表来解决可访问性问题。使用jQuery基于thead动态创建一个新表（复制thead）并将其注入到第一个表上方的页面中并给它固定位置。它应该在表格的其余部分滚动时保持在原位，但仍然可以访问并在禁用 JavaScript 的情况下工作。

【讨论】：

【解决方案8】：

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

【讨论】：