是否有跨浏览器的CSS/JavaScript技术来显示一个长HTML表,使列标题保持固定在屏幕上,而不随表体滚动。想想微软Excel中的“冻结窗格”效果。
我希望能够滚动表的内容,但总是能够在顶部看到列标题。
是否有跨浏览器的CSS/JavaScript技术来显示一个长HTML表,使列标题保持固定在屏幕上,而不随表体滚动。想想微软Excel中的“冻结窗格”效果。
我希望能够滚动表的内容,但总是能够在顶部看到列标题。
当前回答
简单的jQuery插件
这是Mahes解的一个变种。你可以像这样调用它$('table#foo').scrollableTable();
这个想法是:
将head和tbody分割为单独的表元素 使它们的单元格宽度再次匹配 将第二个表包装在div.scrollable中 使用CSS使div.scrollable实际滚动
CSS可以是:
div.scrollable { height: 300px; overflow-y: scroll;}
警告
显然,拆分这些表会降低标记的语义性。我不确定这对可访问性有什么影响。 这个插件不处理页脚,多个页眉等。 我只在Chrome 20版本中测试过。
也就是说,它符合我的目的,你可以自由地使用和修改它。
下面是插件:
jQuery.fn.scrollableTable = function () {
var $newTable, $oldTable, $scrollableDiv, originalWidths;
$oldTable = $(this);
// Once the tables are split, their cell widths may change.
// Grab these so we can make the two tables match again.
originalWidths = $oldTable.find('tr:first td').map(function() {
return $(this).width();
});
$newTable = $oldTable.clone();
$oldTable.find('tbody').remove();
$newTable.find('thead').remove();
$.each([$oldTable, $newTable], function(index, $table) {
$table.find('tr:first td').each(function(i) {
$(this).width(originalWidths[i]);
});
});
$scrollableDiv = $('<div/>').addClass('scrollable');
$newTable.insertAfter($oldTable).wrap($scrollableDiv);
};
其他回答
我希望我能早点找到@Mark的解决方案,但在我看到这个SO问题之前,我自己写了一个……
我的是一个非常轻量级的jQuery插件,它支持固定的页眉、页脚、列跨越(colspan)、调整大小、水平滚动,以及滚动开始前可选的显示行数。
jQuery。scrollTableBody (GitHub)
只要你有一个合适的<thead>, <tbody>,和(可选)<tfoot>的表,你所需要做的就是:
$('table').scrollTableBody();
两个div,一个用于头,一个用于数据。使数据div可滚动,并使用JavaScript将标题中的列的宽度设置为与数据中的宽度相同。我认为数据列的宽度应该是固定的,而不是动态的。
:)
不太干净,但纯粹的HTML/CSS解决方案。
table {
overflow-x:scroll;
}
tbody {
max-height: /*your desired max height*/
overflow-y:scroll;
display:block;
}
针对IE8+更新 JSFiddle例子
我刚刚完成了一个jQuery插件,将采取有效的单一表使用有效的HTML(必须有一个标题和tbody),并将输出一个表,有固定的标题,可选的固定页脚,可以是一个克隆的标题或任何你选择的内容(分页等)。如果你想利用更大的显示器,它也会在浏览器调整大小时调整表的大小。另一个添加的特性是,如果表列不能全部放入视图,则可以侧滚动。
http://fixedheadertable.com/
在github: http://markmalek.github.com/Fixed-Header-Table/
它非常容易安装,你可以为它创建自己的自定义样式。它还在所有浏览器中使用圆角。请记住,我刚刚发布了它,所以它在技术上仍然是测试版,有一些小问题我正在解决。
它适用于Internet Explorer 7、Internet Explorer 8、Safari、Firefox和Chrome浏览器。
这可以在四行代码中清晰地解决。
如果您只关心现代浏览器,那么使用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转换的支持广泛可用。
下面是完整的例子供参考:
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>