首先,需要确定是否添加了正确的CSS属性position:sticky
,以及正确的CSS选择器。
如果确定CSS样式正确,则可能是由于窗口大小的改变导致了sticky表格的失效。解决方法是添加JavaScript代码,以便在窗口大小发生变化时重新计算并重新应用sticky表格。
下面的代码演示了如何在窗口大小改变时应用sticky表格:
window.addEventListener('resize', function(){
var stickyHeaders = document.querySelectorAll('.sticky');
for (var i = 0; i < stickyHeaders.length; i++) {
stickyHeaders[i].style.width = stickyHeaders[i].offsetWidth + 'px';
}
}, false);
这段代码使用了resize
事件监听器,当窗口大小发生变化时,重新计算sticky表格并重新应用CSS属性和样式。注意,这里的.sticky
是CSS选择器,获取所有拥有class="sticky"
属性的元素。
另外,还需要确保排版正确,表格的容器必须使用position:relative
,而表头必须使用position:sticky
。
Header 1
Header 2
Header 3
Cell 1.1
Cell 1.2
Cell 1.3
Cell 2.1
Cell 2.2
Cell 2.3
Cell 3.1
Cell 3.2
Cell 3.3
这是一个简单的表格示例
上一篇:不同大小但列没有区别的数据框