关于table,表头固定内容可下拉的问题
表头固定,内容可下拉
按逻辑来考虑:
1.如果要将<thead>和<tbody>放在同一个table内,那纵向滚动条势必会包含<thead>,如果要把<thead>固定,那滚动条下拉到<thead>时,就要把整个<thead>拷贝出来,悬浮在视窗上面,还要考虑列多时的一个横向滚动。麻烦系数:⭐⭐⭐⭐
2.将<thead>和<tbody>分到不同的table中,在tbody里加高度限制,加滚动条,能够实现,但有些视觉瑕疵。另外,两个table中,thead和tbody要保持列对应,如果tbody有横向滚动,要保证thead也跟着滚动。麻烦系数:⭐⭐
方法1????:$^&&$#%^&**!!#@@$%
方法2????:
<div class="data-form"><!--不要滚动条-->
<div id="head-div" style="width: 100%;overflow: hidden;"><!--列太多时,把显示不了的隐藏-->
<table>
</table>
</div>
<div id="body-div" style="width: 100%;height: 230px;overflow: auto;"><!--允许有滚动条-->
<table>
</table>
</div>
</div>
保证横向滚动时,head-div的表头,能跟着滑动:
var lastTop = 0;
$('#body-div').on('scroll',function(){
let left = $(this).scrollLeft();
$('#head-div').scrollLeft(left);
/**如果要处理下拉加载数据????*/
let scrollT = $(this).scrollTop();
if (scrollT != lastTop){ //当上一次滑动的高度,和本次高度不一样,说明上/下 滚动了
lastTop = scrollT;
}
/**如果要处理下拉加载数据????*/
});
由于右侧有滚动条的存在,会导致列不对齐,这个东西嘛......