带有固定标题的HTML表格？ [英] HTML table with fixed headers?
问题描述
有一种跨浏览器的CSS / JavaScript技术来显示一个长HTML表格，使列标题保持固定在屏幕上，不与表体一起滚动。想想在Microsoft Excel中的冻结窗格效果。
Is there a cross-browser CSS/JavaScript technique to display a long HTML table such that the column headers stay fixed on-screen and do not scroll with the table body. Think of the "freeze panes" effect in Microsoft Excel.
我想能够滚动表的内容，但总是能够看到列
I want to be able to scroll through the contents of the table, but to always be able to see the column headers at the top.
推荐答案
我在寻找一个解决方案一段时间，发现大部分的答案都不工作或者不适合我的情况，所以我用jquery写了一个简单的解决方案。
I was looking for a solution for this for a while and found most of the answers are not working or not suitable for my situation, so i wrote a simple solution with jquery.
这是解决方案大纲。
- 克隆需要有固定标题的表格，并将
克隆副本放在原始文件之上 - 从顶部表格中删除表格主体
- 从底部表格中删除表格
- 调整列宽。 （我们记住原始列宽）
- clone the table which needs to have fixed header and place the cloned copy on top of original
- remove the table body from top table
- remove the table header from bottom table
- adjust the column widths. (we are remembering the original column widths)
是代码。这里是演示固定标题演示
<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>
;即。因为这是基于jquery这应该工作在其他jquery支持的浏览器以及。
this solution works in chrome & ie. since this is based on jquery this should work in other jquery supported browsers as well.
这篇关于带有固定标题的HTML表格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
