表格 - 固定标题、可滚动正文、最强大/最简单的解决方案？ [复制]
Posted
技术标签:
【中文标题】表格 - 固定标题、可滚动正文、最强大/最简单的解决方案？ [复制]【英文标题】：Table - fixed header, scrollable body, most robust/simple solution? [duplicate] 【发布时间】：2010-11-21 00:35:58 【问题描述】：可能重复：html table with fixed headers?
寻找一种解决方案来创建具有可滚动正文和静态/固定标题的表格。
四处搜索似乎会产生 许多 片状代码，要么在 IE 中无法运行，需要大量的 javascript 和调整，要么是大量的 CSS hack 等等。
老实说，如果是 CSS hack 或 Javascript，我想我更愿意选择 Javascript。
我猜的替代方法是将它全部放在一个 div 中，然后滚动整个表格 - 但这有点不合适：D
【问题讨论】：
复制：***.com/questions/673153/… 【参考方案1】：我刚刚组装了一个 jQuery 插件，它完全可以满足您的需求。它的体积非常小，而且非常容易实现。
所需要的只是一个包含thead 和tbody 的表格。
您可以将该表包装在一个带有类名的 DIV 中，并且该表将始终调整大小以适合该 div。因此，例如，如果您的 div 与浏览器窗口一起缩放，那么表格也会随之缩放。滚动时标题将被固定。页脚将被固定（如果您启用页脚）。您还可以选择在页脚中克隆页眉并将其修复。此外，如果您将浏览器窗口设置得太小并且无法容纳所有列...它也会水平滚动（标题也是）。
此插件允许浏览器调整列的大小，使其不是固定宽度的列。
您只需将 DIV 的类名传递给插件，如下所示： $('.myDiv').fixedHeaderTable(footer: true, footerId: 'myFooterId');插件将完成剩下的工作。 FooterID 是页面上包含页脚标记的元素。如果您想将分页作为页脚，则使用此选项。
如果您在页面上有多个表格，它也适用于您希望有一个固定标题的每个表格。
在这里查看：http://fixedheadertable.mmalek.com/
请记住它仍然是“测试版”，所以我每天都会添加新功能和错误修复。
支持的浏览器：IE6、IE7、IE8、FireFox、Safari 和 Chrome
这是我对另一个有同样问题的人的回复的链接：Frozen table header inside scrollable div
【讨论】：
【参考方案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>
这将创建一个固定的列标题，其下方有可滚动的表格。诀窍是将要滚动的表格嵌入标签中，并将溢出属性设置为自动。当内部表格的内容大于周围的高度时，这将强制浏览器显示滚动条。
如果要容纳滚动条，外部表格的宽度必须大于内部表格的宽度。这可能很难完全正确，因为某些用户可能已将其滚动条设置为比默认值更宽或更小。但是，如果有大约 20 到 30 像素的差异，您通常可以很好地显示滚动条。
CSS-Tricks 还谈到了使用 JavaScript 和 CSS 来帮助解决这个问题，以便您可以使用突出显示。这是article的链接。
【讨论】：
虽然这可行，但从可访问性的角度来看并不是很好。没有表头 (如果您可以固定列宽，那就容易多了。如果你想让浏览器计算出宽度，那就更难了。基本上，让表格在 div 中滚动（高度，溢出：自动），并将该 div 放在 position:relative div 中。在外层div中，有另一个div position:absolute,overflow:hidden,height:不管header高度是多少，设置这个div的innerHTML为inner 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>
请注意，当您刷新并且数据大小发生变化时，标题完全匹配。这才是真正的诀窍。
【讨论】：
我完全不明白它是如何工作的，所以它一定是黑魔法。更严重的是，我不得不摆弄我的 TH 标签的高度和 secondWrapper 的高度才能让它工作。如果表格的最大宽度为 98% 左右，它似乎也会更好地工作，以防止表格和滚动条相互碰撞。无论如何，你是怎么想到/从哪里得到这个的？真的很聪明。 其他人注意：如果您有一个带有可编辑元素的表格，则此方法会复制表格并因此复制元素。您已收到警告。 有一大堆的陷阱。在使用这个之后，我认为它不够稳定，无法在任何生产代码中使用。不过，现在改变我对这个答案的赞成票已经太晚了，这太糟糕了。【参考方案4】：我认为解决方案是为 tbody 设置显式高度并将溢出设置为自动或滚动。不幸的是，正如您所发现的，表格和 CSS 是一个棘手的组合，IE 喜欢在它上面窒息。
【讨论】：
【参考方案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>
【讨论】：
一个好主意，但它不起作用：jsfiddle.net/f22uoxqb【参考方案6】：Sitepoint 上也有一个关于这类事情的测验，适合那些寻找非 JS 解决方案的人。但是我发现如果单元格的内容不够宽，表格页脚对于阻止表格标题折叠它们的宽度是必要的。我最终将 tfoot 隐藏在我使用它的应用程序中。 它是纯 HTML/CSS，可在 IE6 和现代浏览器中运行。不过，标题有一些样式限制。
【讨论】：
以上是关于表格 - 固定标题、可滚动正文、最强大/最简单的解决方案？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章