Javascript 表格-固定标题、可滚动正文、最健壮/简单的解决方案？
可能重复：Javascript 表格-固定标题、可滚动正文、最健壮/简单的解决方案？,javascript,html,css,html-table,Javascript,Html,Css,Html Table,可能重复： 正在寻找一个解决方案来创建一个具有可滚动主体和静态/固定标题的表 四处搜索似乎会产生许多不稳定的代码，要么在IE中无法工作，需要大量的Javascript和调整，要么是愚蠢的CSS攻击等等 老实说，如果是CSS黑客或Javascript，我想我更喜欢Javascript选项 我想，另一种方法是将其全部放在一个div中，然后滚动整个表-但这有点像naff:D我认为解决方案是为tbody设置一个显式高度，并将溢出设置为auto或scroll。不幸的是，正如您所发现的，表格和CSS是一个
正在寻找一个解决方案来创建一个具有可滚动主体和静态/固定标题的表 四处搜索似乎会产生许多不稳定的代码，要么在IE中无法工作，需要大量的Javascript和调整，要么是愚蠢的CSS攻击等等 老实说，如果是CSS黑客或Javascript，我想我更喜欢Javascript选项
我想，另一种方法是将其全部放在一个div中，然后滚动整个表-但这有点像naff:D我认为解决方案是为tbody设置一个显式高度，并将溢出设置为auto或scroll。不幸的是，正如您所发现的，表格和CSS是一个棘手的组合，IE喜欢扼杀它。
<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>
第1栏
第2栏
值1
价值2
值1
价值2
值1
价值2
值1
价值2
值1
价值2
值1
价值2
CSS技巧还讨论了使用JavaScript和CSS来帮助实现这一点，以便您可以使用高亮显示。这是链接。如果你能修改列宽，那就容易多了。如果你想让浏览器计算出宽度，那就要困难得多。基本上，在div中有一个滚动的表（height，overflow:auto），并将该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>
var html='标题1标题2'；
var width=Math.floor（Math.random（）*100）；
var d=“”；
对于（var i=0；i请注意，当您刷新和数据大小更改时，标头将完全匹配。这才是真正的诀窍。对于那些寻找非JS解决方案的人来说，还有一个关于这类事情的测验。然而，我发现如果单元格的内容不够宽，那么表尾是阻止表头折叠其宽度所必需的。我最终将tfoot隐藏在我使用它的应用程序中。
它是纯HTML/CSS，适用于IE6和现代浏览器。不过，标题的样式设置有一些限制。我刚刚组装了一个jQuery插件，它可以完全满足您的需要。它的体积非常小，而且很容易实现 所需要的只是一张有THAD和tbody的桌子 您可以使用类名将该表包装在一个DIV中，并且该表将始终调整大小以适应该DIV。例如，如果您的DIV随浏览器窗口缩放，则该表也将调整大小。滚动时标题将被固定。页脚将被修复（如果启用页脚）。您还可以选择在页脚中克隆页眉并将其修复。此外，如果您的浏览器窗口太小，所有列都无法容纳…它也将水平滚动（标题也） 此插件允许浏览器调整列的大小，使它们不是固定宽度的列 只需将DIV的类名传递给插件，如下所示：$（'.myDiv'）.fixedHeaderTable（{footer:true，footerId:'myFooterId'}）；插件将完成剩下的工作。FooterID是页面上包含页脚标记的元素。如果要将分页作为页脚，则使用此选项 如果页面上有多个表，那么它也适用于每个需要固定标题的表 在这里查看： 请记住它仍然是“beta版”，所以我每天都在添加新功能和bug修复 支持的浏览器：IE6、IE7、IE8、FireFox、Safari和Chrome 下面是我对另一个有同样问题的人的回答的链接：这个怎么样：
<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>
头
..