Question

我有三个div。标题，中心和页脚。中央div（gridview）中有一个表，它几乎总是比外部div长。所以我把这个div垂直滚动了。问题是：如何在div向下滚动后显示表头？我可以使用单独的div或表完成此标题并使其固定但表中列的宽度并不总是相同 - 所以我不知道如何在标题中保持列的宽度。任何线索？

Answer 1

我刚刚整理了一个jQuery插件，它可以完全满足您的需求。它非常小，非常容易实现。

所需要的只是一个包含thead和tbody的表。

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

你只需将DIV的类名传递给插件就像这样：$（'。myDiv'）。fixedHeaderTable（{footer：true，footerId：'myFooterId'}）; 而插件将完成剩下的工作。 FooterID是页面上包含页脚标记的元素。如果您希望将分页作为页脚，则使用此选项。

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

在此处查看：http://fixedheadertable.mmalek.com/

请记住它仍然是'beta'，所以我每天都会添加新功能和错误修复。

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

Answer 2

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

解决方案使用CSS和几行jQuery代码，将“内部”的HTML克隆到“标题”并设置其宽度和高度。支持固定和可变列宽。使用IE8，Firefox 9，Safari和谷歌浏览器进行测试。

以下是示例代码：

    	$(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>

Answer 3

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

Answer 4

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

修改

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

假设这是动态内容，则根据字符串的长度生成“固定”宽度。显然，就EMs而言，并留下一些误差。

使用javascript。

使用固定宽度列。

我实际上没有尝试过第一次，它可能会让事情过于复杂。如果你对这种效果感到绝望，那就可以尝试了。

我还应该提一下，可能有表格小部件的javascript库已经这样做了。看看他们是怎么做的。

Answer 5

您需要在表格中添加有关数据表的标题。您可以使用table-layout：fixed来维护列宽。 JavaScript可用于匹配列宽。

Answer 6

这是一个很好的解决方案（主要是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代码会在最后增加表格宽度，并禁用水平滚动条。你可能想要也可能不想要。

Answer 7

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

Answer 8

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

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

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

IE一般都有严重和tbody的复杂问题。它可以用表达式解决，但它非常重要，并且特定于设计。

Answer 9

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

Answer 10

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

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

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

Answer 11

此解决方案使用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并从那里开始。

可滚动div内的冷冻表头

11 个答案: