Html 可滚动div中的冻结表标题

我有三个div。页眉、中间和页脚。在中央div（gridview）中有一个表，它几乎总是比外部div长。所以我使这个div可以垂直滚动。问题是：如何使表格标题在向下滚动div后可见？我可以用单独的div或table来完成这个标题，并将其固定，但表中的列宽度并不总是相同的-所以我不知道如何保持标题中的列宽度。有什么线索吗？

您必须将标题放在可滚动的div之外。div内的所有内容都将滚动

编辑

关于宽度，如果您选择单独的标题，我可以看到一些解决方案：

• 假设这是动态内容，根据字符串的长度生成“固定”宽度。显然，在EMs方面进行了详细说明，并留有一定的误差余地
• 使用javascript
• 使用固定宽度的列

实际上我还没有试过第一种，这可能会使事情变得有点过于复杂。不过，如果你非常渴望这种效果，那就尝试一下吧

---

我还应该提到，可能已经有javascript库和表小部件实现了这一点。看看它们是如何做到的。

您需要在一个表中添加有关数据表的标题。可以使用“表格布局：固定”来保持列宽。JavaScript可以用来匹配列宽。

我还没有测试过这一点，但也许可以生成两次表，一次在标题中，一次在滚动div中。然后在标题中，使除标题行之外的所有行都不可见。可以使用“display:none”或将其高度设置为零。

以下是使用javascript的基本解决方案：

function position(table) {
    table.rows[0].style.position="absolute";
    table.rows[0].style.top="0px";
    table.style.marginTop = table.rows[0].clientHeight/1.2;
    var widths = Array();
    for(var i = 0; i < table.rows[0].cells.length; i++) {
        widths[i] = max(table.rows[0].cells[i].clientWidth, table.rows[1].cells[i].clientWidth);
    }
    for(var row = 0; row < table.rows.length; row++) {
        for(var col = 0; col < widths.length; col ++) {
            table.rows[row].cells[col].style.width = widths[col] + "px";
        }
    }
}

function max(num1, num2) { return (num1 > num2) ? num1 : num2; }

功能位置（表）{
table.rows[0].style.position=“绝对”；
table.rows[0].style.top=“0px”；
table.style.marginTop=table.rows[0].clientHeight/1.2；
变量宽度=数组（）；
对于（var i=0；inum2）？num1:num2；}

这里有一个很好的解决方案（主要是CSS），它使用固定宽度的列：

下面是一段jQuery代码，用于在单元格内容的宽度大于固定宽度时固定单元格宽度：

<script
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"
  type="text/javascript"></script>
<script>
$(function() {
  $('div.tableContainer').each(function() { // for each table
    var div = $(this);
    var widths = [];
    var changed = false;
    $('table>*>tr', div).each(function(tr_i) {
      $(this).children().each(function(i) {
        var w = $(this).width();
        if (w > widths[i]) {
            widths[i] = w;
            changed = true;
        }
      });
    }).each(function(tr_i) {
      if (changed)
      $(this).children().each(function(i) {
        var width = widths[i];
        // add some width for scrollbar
        if (tr_i == 0 && changed && i == widths.length-1) width += 16;
        // insert a div to ensure width
        $(this).append('<div style="width:'+width+'px; height:0px">&nbsp;</div>');
      });
    });
    div.width(div.children('table').width()).css('overflow-x', 'hidden');
  });
});
</script>

$（函数（）{
$（'div.tableContainer'）。每个（函数（）{//用于每个表
var div=$（本）；
风险值宽度=[]；
var=false；
$（'table>*>tr'，div）。每个（函数（tr_i）{
$（this）.children（）.each（函数（i）{
var w=$（this.width（）；
如果（w>宽度[i]）{
宽度[i]=w；
更改=正确；
}
});
}).每个功能（tr_i）{
如果（更改）
$（this）.children（）.each（函数（i）{
变量宽度=宽度[i]；
//为滚动条添加一些宽度
如果（tr_i==0&&changed&&i==widths.length-1）宽度+=16；
//插入一个div以确保宽度
$（此）。附加（“”）；
});
});
div.width（div.children（'table'）.width（））.css（'overflow-x'，'hidden'）；
});
});

当使用非严格DTD时，IE中的输出有点失真。如果不能使用标准模式，请调整CSS中的宽度

---

请注意，jQuery代码增加了末尾的表宽度，并禁用了水平滚动条。您可能想要，也可能不想要。

您可以尝试jQuery插件。技术基本上是一样的：克隆一个头并将其放在表层的顶部。

如果您正在寻找全面的跨浏览器实现，请查看YUI数据表。我相信这是通过创建另一个具有匹配列宽的表来实现的

似乎需要一些技巧来固定列宽。如果我没记错的话，Firefox需要有标签

---

无论如何，YUI数据表（50k行）中使用了许多技巧。你最好看看它，然后决定你自己想用它走多远。

这个解决方案在Firefox和其他Gecko浏览器中使用CSS，在IE中使用CSS表达式

页眉和页脚在Opera或Safari/Chrome中并不固定，但整个表格是可滚动的，因此可以使用。请注意，在作者的示例中，列的宽度是给定的百分比，但是可以删除它们

---

如果您想尝试Opera/Safari/Chrome支持，请查看tbody display:block and go from the That。

您真正想做的是使数据表的

可滚动，这样

和

将保持自然固定

虽然这对FF等人来说微不足道：

tbody
{
    height: 100px; /* or whatever */
    overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
}

---

IE通常与tbody存在严重而复杂的问题。它可以用表达式来解决，但它不是简单的，而且是特定于设计的。

我刚刚组装了一个jQuery插件，它可以完全满足您的需要。它的体积非常小，而且很容易实现

所需要的只是一张有THAD和tbody的桌子

您可以使用类名将该表包装在一个DIV中，并且该表将始终调整大小以适应该DIV。例如，如果您的DIV随浏览器窗口缩放，则该表也将调整大小。滚动时标题将被固定。页脚将被修复（如果启用页脚）。您还可以选择在页脚中克隆页眉并将其修复。此外，如果您的浏览器窗口太小，所有列都无法容纳…它也将水平滚动（标题也）

只需将DIV的类名传递给插件，如下所示：$（'.myDiv'）.fixedHeaderTable（{footer:true，footerId:'myFooterId'}）； 插件将完成剩下的工作。FooterID是页面上的一个元素