关于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;
    }
    /**如果要处理下拉加载数据?*/
});

由于右侧有滚动条的存在，会导致列不对齐，这个东西嘛......