具有固定标题的HTML表？
有没有一种跨浏览器的CSS/JavaScript技术可以显示一个很长的HTML表格，使列标题在屏幕上保持固定，而不是与表格主体一起滚动。想想Microsoft Excel中的“冻结窗格”效果。
我希望能够滚动浏览表格的内容，但始终能够看到顶部的列标题。
回答 31
Stack Overflow用户
发布于 2011-10-12 04:49:21
我为此寻找了一段时间的解决方案，发现大多数答案都不起作用或不适合我的情况，所以我用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的浏览器中也应该可以工作。
Stack Overflow用户
发布于 2014-09-18 09:35:02
这可以在四行代码中干净利落地解决。
如果您只关心现代浏览器，那么通过使用CSS转换可以更容易地实现固定的头部。听起来很奇怪，但效果很好：
- HTML和CSS保持原样。
- 没有外部JavaScript dependencies.
- Four代码行。
- 适用于所有配置(表格布局:固定等)。
document.getElementById("wrap").addEventListener("scroll", function(){
var translate = "translate(0,"+this.scrollTop+"px)";
this.querySelector("thead").style.transform = translate;
});对CSS转换的支持是widely available，除了is 8-。
下面是完整的示例以供参考：
document.getElementById("wrap").addEventListener("scroll",function(){
var translate = "translate(0,"+this.scrollTop+"px)";
this.querySelector("thead").style.transform = translate;
});/* Your existing container */
#wrap {
overflow: auto;
height: 400px;
}
/* CSS for demo */
td {
background-color: green;
width: 200px;
height: 100px;
}<div id="wrap">
<table>
<thead>
<tr>
<th>Foo</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
</table>
</div>
Stack Overflow用户
发布于 2009-10-06 05:56:45
我刚刚完成了一个jQuery插件，它将使用有效的超文本标记语言(必须有标题和正文)获取有效的单表，并将输出一个具有固定标题的表格，可选的固定页脚可以是克隆的标题或任何你选择的内容(分页等)。如果您想利用更大的监视器，它还将在调整浏览器大小时调整表的大小。另一个新增的功能是，如果表列不能全部显示在视图中，则可以侧向滚动。
http://fixedheadertable.com/
在github上：http://markmalek.github.com/Fixed-Header-Table/
它非常容易设置，您可以为它创建自己的自定义样式。它还在所有浏览器中使用圆角。请记住，我刚刚发布了它，所以从技术上讲，它仍然是测试版，有很少的小问题我正在解决。
它适用于Internet Explorer 7、Internet Explorer 8、Safari、Firefox和Chrome。
https://stackoverflow.com/questions/673153
复制相似问题
腾讯云开发者
