是否有跨浏览器的 CSS/JavaScript 技术来显示长 HTML 表格，以便列标题固定在屏幕上并且不随表格主体滚动。想想 Microsoft Excel 中的“冻结窗格”效果。
我希望能够滚动浏览表格的内容，但始终能够看到顶部的列标题。
带有固定标题的 HTML 表格？
IT技术
javascript
css
html-table
2021-01-21 04:40:23
6个回答
这可以用四行代码干净地解决。
如果您只关心现代浏览器，则可以通过使用 CSS 转换更轻松地实现固定标头。听起来很奇怪，但效果很好：
- HTML 和 CSS 保持原样。
- 没有外部 JavaScript 依赖项。
- 四行代码。
- 适用于所有配置（表格布局：固定等）。
document.getElementById("wrap").addEventListener("scroll", function(){
var translate = "translate(0,"+this.scrollTop+"px)";
this.querySelector("thead").style.transform = translate;
});
除了 Internet Explorer 8- 之外，对 CSS 转换的支持是广泛可用的。
以下是完整示例供参考：
我为此寻找了一段时间的解决方案，发现大多数答案都不起作用或不适合我的情况，所以我用 jQuery 编写了一个简单的解决方案。
这是解决方案大纲：
- 克隆需要固定标题的表，并将克隆的副本放在原始表的顶部。
- 从顶部桌子上取下桌子主体。
- 从底部表格中删除表格标题。
- 调整列宽。（我们跟踪原始列宽）
以下是可运行演示中的代码。
function scrolify(tblAsJQueryObject, height) {
var oTbl = tblAsJQueryObject;
// for very large tables you can remove the four lines below
// and wrap the table with <div> in the mark-up and assign
// height and overflow property
var oTblDiv = $("<div/>");
oTblDiv.css('height', height);
oTblDiv.css('overflow', 'scroll');
oTbl.wrap(oTblDiv);
// save original width
oTbl.attr("data-item-original-width", oTbl.width());
oTbl.find('thead tr td').each(function() {
$(this).attr("data-item-original-width", $(this).width());
});
oTbl.find('tbody tr:eq(0) td').each(function() {
$(this).attr("data-item-original-width", $(this).width());
});
// clone the original table
var newTbl = oTbl.clone();
// remove table header from original table
oTbl.find('thead tr').remove();
// remove table body from new table
newTbl.find('tbody tr').remove();
oTbl.parent().parent().prepend(newTbl);
newTbl.wrap("<div/>");
// replace ORIGINAL COLUMN width
newTbl.width(newTbl.attr('data-item-original-width'));
newTbl.find('thead tr td').each(function() {
$(this).width($(this).attr("data-item-original-width"));
});
oTbl.width(oTbl.attr('data-item-original-width'));
oTbl.find('tbody tr:eq(0) td').each(function() {
$(this).width($(this).attr("data-item-original-width"));
});
}
$(document).ready(function() {
scrolify($('#tblNeedsScrolling'), 160); // 160 is height
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div style="width:300px;border:6px green solid;">
<table border="1" width="100%" id="tblNeedsScrolling">
<thead>
<tr><th>Header 1</th><th>Header 2</th></tr>
</thead>
<tbody>
<tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
<tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
<tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>
<tr><td>row 4, cell 1</td><td>row 4, cell 2</td></tr>
<tr><td>row 5, cell 1</td><td>row 5, cell 2</td></tr>
<tr><td>row 6, cell 1</td><td>row 6, cell 2</td></tr>
<tr><td>row 7, cell 1</td><td>row 7, cell 2</td></tr>
<tr><td>row 8, cell 1</td><td>row 8, cell 2</td></tr>
</tbody>
</table>
</div>此解决方案适用于 Chrome 和 IE。由于它基于 jQuery，因此这也应该适用于其他支持 jQuery 的浏览器。
我刚刚完成了一个 jQuery 插件的组合，该插件将使用有效的 HTML 获取有效的单个表（必须有一个 thead 和 tbody），并将输出一个具有固定页眉的表，可选的固定页脚可以是克隆页眉或任何您选择的内容（分页等）。如果您想利用更大的显示器，它也会在调整浏览器大小时调整表格的大小。另一个新增功能是如果表格列无法全部显示在视图中，则能够横向滚动。
在 github 上：http : //markmalek.github.com/Fixed-Header-Table/
它非常容易设置，您可以为其创建自己的自定义样式。它还在所有浏览器中使用圆角。请记住，我刚刚发布了它，所以它在技术上仍然是测试版，我要解决的小问题很少。
它适用于 Internet Explorer 7、Internet Explorer 8、Safari、Firefox 和 Chrome。
我还创建了一个插件来解决这个问题。我的项目 - jQuery.floatThead已经存在 4 年多了，并且非常成熟。
它不需要外部样式，也不希望您的表格以任何特定方式进行样式设置。它支持 Internet Explorer9+ 和 Firefox/Chrome。
目前（2018-05）它有：
GitHub 上的 405 次提交和 998 颗星
这里的许多（不是全部）答案都是快速技巧，可能已经解决了一个人遇到的问题，但并非对每张桌子都有效。
其他一些插件很旧，可能在 Internet Explorer 上运行良好，但在 Firefox 和 Chrome 上会失效。
所有在 CSS 规范之外解决这个问题的尝试都是我们真正想要的东西的苍白阴影：交付 THEAD 的隐含Promise。
长期以来，这个冻结的表头问题一直是 HTML/CSS 中的一个开放性伤口。
在一个完美的世界里，这个问题会有一个纯 CSS 解决方案。不幸的是，似乎没有一个好的地方。
关于该主题的相关标准讨论包括：
- www-style 的粘性定位提案：http : //lists.w3.org/Archives/Public/www-style/2012Jun/0627.html
- Tab Atkins 关于位置根、位置包含或位置限制的提议：http : //www.xanthir.com/blog/b48H0
更新：Firefox 发布position:sticky的第 32 版。每个人都赢了！
其它你可能感兴趣的问题