具有固定标题的HTML表？
具有固定标题的HTML表？
提问于 2009-03-23 20:11:12
有没有一种跨浏览器的CSS/JavaScript技术可以显示一个很长的HTML表格，使列标题在屏幕上保持固定，而不是与表格主体一起滚动。想想Microsoft Excel中的“冻结窗格”效果。
我希望能够滚动浏览表格的内容，但始终能够看到顶部的列标题。
Stack Overflow用户
发布于 2014-04-08 00:25:48
这是一个我们最终使用的解决方案(为了处理一些边缘情况和旧版本的it浏览器，我们最终也淡出了滚动上的标题栏，然后在滚动结束时淡出它，但在火狐和WebKit浏览器中，这个解决方案是有效的。它假设边界崩溃:崩溃。
这个解决方案的关键是，一旦你应用了border-collapse，CSS转换，就会在头上工作，所以这只是一个截取滚动事件并正确设置转换的问题。你不需要复制任何东西。除非在浏览器中正确实现此行为，否则很难想象有比这更轻量级的解决方案了。
JSFiddle：http://jsfiddle.net/podperson/tH9VU/2/
它被实现为一个简单的jQuery插件。你只需要像$('thead').sticky()这样的调用让你的头变得粘滞，它们就会被挂起。它适用于一个页面上的多个表和大表的头部部分。
$.fn.sticky = function(){
$(this).each( function(){
var thead = $(this),
tbody = thead.next('tbody');
updateHeaderPosition();
function updateHeaderPosition(){
if(
thead.offset().top < $(document).scrollTop()
&& tbody.offset().top + tbody.height() > $(document).scrollTop()
){
var tr = tbody.find('tr').last(),
y = tr.offset().top - thead.height() < $(document).scrollTop()
? tr.offset().top - thead.height() - thead.offset().top
: $(document).scrollTop() - thead.offset().top;
thead.find('th').css({
'z-index': 100,
'transform': 'translateY(' + y + 'px)',
'-webkit-transform': 'translateY(' + y + 'px)'
});
} else {
thead.find('th').css({
'transform': 'none',
'-webkit-transform': 'none'
});
}
}
// See http://www.quirksmode.org/dom/events/scroll.html
$(window).on('scroll', updateHeaderPosition);
});
}
$('thead').sticky();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/673153
复制相关文章
相似问题
腾讯云开发者
