带有固定标题的HTML表格？
是否有一个跨浏览器的CSS / JavaScript技术来显示一个长的HTML表格，以便列标题保持固定在屏幕上，并且不随表格主体滚动。 想想Microsoft Excel中的“冻结窗格”效果。
我希望能够滚动浏览表格的内容，但始终能够看到顶部的列标题。
我一直在寻找一个解决方案，并发现大多数答案不工作或不适合我的情况，所以我写了一个简单的解决方案与jQuery。
这是解决方案大纲。
下面是代码。 这里是演示固定头文件演示
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
<script>
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>
</head>
<body>
<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>
</body>
这个解决方案在Chrome＆IE中工作。 因为这是基于jquery，所以它也应该在其他jQuery支持的浏览器中工作。
这可以用四行代码干净地解决。
如果您只关心现代浏览器，那么通过使用CSS转换可以使固定标题变得更容易。 听起来很奇怪，但效果很好：
document.getElementById("wrap").addEventListener("scroll", function(){
var translate = "translate(0,"+this.scrollTop+"px)";
this.querySelector("thead").style.transform = translate;
});
除了IE8之外，对CSS转换的支持已经广泛可用。 以下是供参考的完整示例：
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>我刚刚完成了一个jQuery插件，它将使用有效的HTML使用有效的单表（必须有一个thead和tbody），并将输出一个具有固定标题的表格，可选的固定页脚，可以是克隆的标题或任何你选择的内容（分页等）。 如果你想利用更大的显示器，当浏览器调整大小时，它也会调整表格的大小。 如果表格栏不能全部放在视图中，另一个附加功能是可以侧向滚动。
http://fixedheadertable.com/
在github上：http://markmalek.github.com/Fixed-Header-Table/
这是非常容易设置，你可以创建自己的自定义样式。 它也在所有浏览器中使用圆角。 请记住我刚刚发布了它，所以它在技术上仍然是测试版，并且我正在消除的小问题很少。
它适用于Internet Explorer 7，Internet Explorer 8，Safari，Firefox和Chrome。
链接地址: http://www.djcxy.com/p/51755.html