Question

可能重复：
HTML table with fixed headers?

寻找创建具有可滚动主体和静态/固定标头的表的解决方案。

搜索周围似乎会产生 MANY 片状代码，要么在IE中不起作用，要么需要大量的Javascript和调整，要么需要大量的CSS黑客等。

说实话，如果是CSS hacks或Javascript的情况，我想我更喜欢使用Javascript选项。

另一种选择我想将它全部放在一个div中，然后滚动整个表格 - 但这有点不对劲：D

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

以下是我对另一个有同样问题的人的回复的链接：Frozen table header inside scrollable div

Answer 2

<table style="width: 300px" cellpadding="0" cellspacing="0">
<tr>
  <td>Column 1</td>
  <td>Column 2</td>
</tr>
</table>

<div style="overflow: auto;height: 100px; width: 320px;">
  <table style="width: 300px;" cellpadding="0" cellspacing="0">
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  </table>
</div>

这会创建一个固定的列标题，其下方有可滚动的表格。诀窍是嵌入要在标签中滚动的表，并将overflow属性设置为auto。当内表的内容大于周围的高度时，这将强制浏览器显示滚动条。

如果内表适应滚动条，外部的宽度必须大于宽度。这可能很难完全正确，因为某些用户可能已将其滚动条设置为比默认值更宽或更小。但是，如果差异大约为20到30像素，您通常可以很好地显示滚动条。

CSS-Tricks还讨论了使用JavaScript和CSS来帮助解决这个问题，因此您可以使用突出显示。这是article的链接。

Answer 3

如果你可以修复列宽 - 那就容易多了。如果你想让浏览器弄清楚宽度，那就更难了。基本上，让div中的表滚动（高度，溢出：自动）并将div放在一个位置：relative div。在外部div中，有另一个div位置：absolute，overflow：hidden，height：无论头部高度是多少，将div的innerHTML设置为内部div的innerHTML;这是一个演示的页面。有很多陷阱，但它是可行的...

<html>
<head></head>
<body onload="doit();">
<div id="outer" style="position:relative;">
  <div id="inner" style="height:100px; overflow:auto;">
    <script>
       var html = '<table><tr><th>Heading 1</th><th>Heading 2</th></tr>';
       var width = Math.floor(Math.random() * 100);
       var d = '';
       for(var i = 0; i < width; i++){d += 'a';}
       for(var i = 0; i < 100; i++){
          html += '<tr><td>' + d + '</td><td>some more data</td>';
       }
       html += '</table>';
       document.write(html);
    </script>
  </div>
  <div id="secondWrapper" style="position:absolute; background:#fff; left:0; top:0; height:25px; overflow:hidden;"></div>
</div>

<script>
function doit(){
  var inner = document.getElementById('inner');
  var secondWrapper = document.getElementById('secondWrapper');
  secondWrapper.innerHTML = inner.innerHTML; 
}
</script>
</body>
</html>

请注意，当您刷新并且数据大小发生变化时，标题会完美匹配。这是真正的伎俩。

Answer 4

我认为解决方案是为tbody设置一个显式高度，并将溢出设置为auto或scroll。不幸的是，正如您所发现的，表格和CSS是一个棘手的组合，IE喜欢扼杀它。

Answer 5

这个怎么样：

<table style="width: 400px;"> 
<thead><tr> <th> head </th> </tr>
</thead>
<tbody style="height: 100px; overflow-y: auto; overflow-x: hidden;">
<tr> <th> .. </th> </tr>
</tbody>
</table>

Answer 6

对于那些寻找非JS解决方案的人来说，Sitepoint上还有一个关于这类事情的测验。但是我发现，如果单元格的内容不够宽，则需要使用表格页脚来阻止表格标题折叠它们的宽度。我最终将tfoot隐藏在我用过的应用程序中它是纯HTML / CSS，适用于IE6和现代浏览器。虽然标题有一些样式限制。

表 - 固定标题，可滚动主体，最强大/简单的解决方案？

6 个答案: