html - 可滚动div内的冻结表头

Question

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

score 13 · Accepted Answer

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

所需要的只是一个具有thead 和tbody 的表。

您可以将该表包装在具有类名的 DIV 中，并且该表将始终调整大小以适合该 div。因此，例如，如果您的 div 与浏览器窗口一起缩放，那么表格也会随之缩放。滚动时标题将被固定。页脚将被固定（如果您启用页脚）。您还可以选择在页脚中克隆页眉并将其修复。此外，如果您的浏览器窗口太小并且无法容纳所有列...它也会水平滚动（标题也是）。

您只需将 DIV 的类名传递给插件，如下所示： $('.myDiv').fixedHeaderTable({footer: true, footerId: 'myFooterId'}); 插件将完成剩下的工作。FooterID 是页面上包含页脚标记的元素。如果您想将分页作为页脚，则使用此选项。

如果页面上有多个表格，它也适用于您希望拥有固定标题的每个表格。

在这里查看：http: //fixedheadertable.mmalek.com/

请记住它仍然是“测试版”，所以我每天都在添加新功能和错误修复。

支持的浏览器：IE6、IE7、IE8、FireFox、Safari、Chrome

score 12 · Accepted Answer

解决方案真的很简单。您需要 3 个 DIV：一个通用容器（在我的“外部”类的情况下）、一个表容器（在我的“内部”类的情况下）和一个 DIV，您可以在其中使用 jQuery 或 javaScript 克隆现有表（在我的类“标题”的情况下）。

解决方案使用CSS和几行jQuery代码，将“inner”的HTML克隆为“header”并设置其宽度和高度。支持固定和可变列宽。通过 IE8、Firefox 9、Safari 和 Google Chrome 测试。

这是一个示例代码：

    	$(document).ready(function() {
    		$('.header').html( $('.inner').html() );
    		$('.header').css('width', $('.inner table').outerWidth() );
    		$('.header').css('height', $('.inner table thead').outerHeight() );
    	});

table {
  width:100%;
}
th {
  border-top:1px solid #999;
  text-align:left;
}
td, th {
  border-bottom:1px solid #999;
  background-color:#EEE;
}
.outer {
  position:relative;
  width:500px;
}
.inner {
  height:150px;
  overflow:auto;
}
.header {
  position:absolute;
  top:0;
  left:0;
  overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="outer">
  <div class="inner">
    <table cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>a</th>
          <th>b</th>
          <th>c</th>
          <th>d</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>2</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>3</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>4</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>5</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>6</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>7</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>8</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>9</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>10</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>11</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>12</td><td>b</td><td>c</td><td>d</td></tr>
      </tbody>
    </table>
  </div>

  <div class="header">
  </div>

</div>
</body>

score 11 · Accepted Answer

这是使用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; }

score 3 · Accepted Answer

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

编辑

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

假设这是动态内容，则根据字符串的长度生成“固定”宽度。显然要根据 EM 指定，并留出一定的误差余地。
使用 JavaScript。
使用固定宽度的列。

我实际上并没有尝试过第一个，它可能有点过于复杂了。如果您迫切需要这种效果，可以尝试一下。

我还应该提到，可能已经有带有表格小部件的 javascript 库可以做到这一点。看看他们，看看他们是如何做到的。

score 2 · Accepted Answer

您需要放置一个表，其中包含有关数据表的标题。您可以使用 table-layout:fixed 来保持列宽。JavaScript 可用于匹配列宽。

score 2 · Accepted Answer

这是一个很好的解决方案（主要是 CSS），它使用固定宽度的列：http ://www.imaputz.com/cssStuff/bulletVersion.html

当单元格内容的宽度大于固定宽度时，这里有一些 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>

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

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

score 2 · Accepted Answer

你可以试试 jQuery 插件Stupid Fixed Header。该技术基本相同：克隆一个标题并将其放在表格层的顶部。

score 2 · Accepted Answer

您真正想要做的是使<tbody>数据表可滚动，因此<thead>and<tfoot>将保持自然固定。

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

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

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

score 1 · Accepted Answer

我没有对此进行测试，但也许您可以生成两次表格，一次在标题中，一次在滚动 div 中。然后在标题中，使除标题行以外的所有行不可见。也许使用“显示：无”或将它们的高度设置为零。

score 1 · Accepted Answer

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

似乎需要一些技巧来修复列宽。如果我没记错的话，Firefox 需要存在 <col/> 标签。

无论如何，YUI 数据表（50k 行）中使用了许多技巧。建议您查看它并决定您想自己走多远。

score 1 · Accepted Answer

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

http://home.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html

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

如果您想尝试 Opera/Safari/Chrome 支持，请查看 tbody display:block 并从那里开始。

html - 可滚动div内的冻结表头

11 回答 11

Related

Reference