遇到这种固定表格的,我们一般都是写两个table,一个放thead,一个放tbody;
如果表格内容少,我们只需要给两个table100%宽度就行,如果遇到表格内容很长的就比较棘手了;
1.上面的table的父容器div样式:
#fixedDiv {
position: absolute;
left: 0;
right: 0;
overflow: hidden;//这里hidden是用于隐藏滚动条
}
2.下面的table的父容器的高度要等于整个大父容器的高度 - 上面table的父容器的高度;可以js控,我这里是写死的;
3.下面的table需要给margin-top值来空出位置给上面;
4.由于右边的滚动条的原因,可能由于数据的多少改变页面布局,可以这样:
if ($('#mainDiv')[0].scrollHeight > $('#mainDiv')[0].clientHeight) {//检测是否该容器存在滚动条
$('#fixedDiv').css('right','17px');
} else {
$('#fixedDiv').css('right', '0');
}
5.
$('#mainDiv').on('scroll', function () {//下边的div滚动多少距离,上面的就滚动多少
$("#fixedDiv").scrollLeft($('#mainDiv').scrollLeft());
});
1.容器1的滚动条同时滚两个table,容器三滚下面的table
2.容器2和容器3都给足宽度,具体看代码