使用DIV标签加js纯页面固定表头,实际上就是将表头获取出来填充到一个DIV中,问题就是如何将表头和表中的内容对齐,特别是在表中数据动态改变列宽不固定的时候
要在纯页面中实现表头固定的功能,最常见的方法就是将表格的表头和内容分别放在两个表格中,然后让表头表格固定在页面的顶部。这样,只要在内容表格中动态更新数据,表头表格就可以一直保持在页面的顶部,达到了固定表头的效果。
具体实现方法如下:
将表格的表头和内容分别放在两个表格中。
<div id="table-container">
<table id="table-header">
<!-- 表头表格 -->
</table>
<table id="table-body">
<!-- 内容表格 -->
</table>
</div>
设置表头表格的样式,使其固定在页面的顶部。
#table-header {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
设置内容表格的样式,使其向下偏移表头表格的高度。
#table-body {
margin-top: 50px; /* 表头表格的高度 */
}
这样,当你在内容表格中动态更新数据,表头表格就会一直保持在页面的顶部,达到了固定表头的效果。
注意:在实际使用中,你需要根据实际情况调整表头表格和内容表格的样式,确保它们之间的对齐关系。