固定表头和固定列表格解决方案

依赖框架

Bootstrap4.1.3、jquery-1.11.0

版本一

使用layui的数据表格。
优点：基本上可以完成项目开始要求，快速开发。可以满足调整列宽
缺点：（1）但随着客户提的页面功能越来，layui的数据表格不能满足，在回调中做了大量的处理，导致项目变得复杂
（2）有些功能还存在bug
（3）表格内特别是单元格内嵌套的元素太多，如果表格内的列太多的话，一页展示100条就出现卡顿了，客户体验很不好
（4）必须是得分页，不能流加载。 客户要求必须一页全部展示处理，不想看到分页栏，说他们不习惯，然后老板也同意了。唉，然后我研究源码半天，好不容易给其加上了流加载，但是由于layui的表格嵌套元素太多，加载到100以后就开始越来越慢，像ie这种浏览器直接卡死。最终不得放弃layui。
（5）layui数据表格源码中也说要优化这块，但是不知何时完成
（6）固定列不可以滚动

版本二

由于layui数据表格满足不了一页展开和流加载，然后我又从网上找一个一个工具jquery-freeze-table，这个工具主要是做固定表头和固定列表格的。实现相对比较简单，功能也不是很强大，没有其它附加功能。
优点：源码简单，容易修改，支持固定表头和列
缺点：
（1）只提供了固定表头和固定列的功能，没有提供其它附加功能。比如排序和调整列宽等
（2）固定列不可以滚动
（3）表格和表体都得自己渲染
（4）固定列是用的position: fixed;只适合表头固定在最顶部和让document出现滚动条。
（5）但是客户又不愿意把表头固定到上面，然后经我一翻骚操作，把表格弄成了固定高度的，在表格的box进行滚动。但是悲催的是出现了各种问题，改的我痛着心扉。
a、拖动列宽废掉了。
b、在360流氓浏览器有广告时和平板上input输入时，如果不让表头到固定最顶部，表体冲出了表格。
c、出现滚动条容易出现错位。我当初用的版本是这样，现在版本看着也没有解决这个问题
b、平板上input出入时表格被订到了上面了
这些问题除了a，参考layui 修改源码后算是勉强改好，但是还是不尽人意
…
现在版本也提供了把表格弄成了固定高度的，在表格的box进行滚动的方式了。当时试了一下，还是有问题，没细细研究。

版本三

由于接口数据结构的变化，前端也要随之大改。所以这次在layui数据表格和jquery-freeze-table的经验和研究下，这次准备去两者所长，写了一种满足业务需要的表格框架。
效果图：

表格结构

说明：
.sf-table-box ：表格最外面的盒子，使用position: relative;限制住盒子里面的东西
.sf-table-head：表头表格的盒子，使用position: relative;限制住盒子里面的东西
.sf-table-body：表体表格的盒子，使用position: relative;限制住盒子里面的东西
.clone-column-table-wrap:克隆表头和表体的盒子。包含克隆出来的表头和表体盒子。 使用position: absolute;进行定位，同时也不至于跳出.sf-table-box 盒子。宽度只是固定列的宽度，隐藏滚动条.
下面源码限制比较大，而且本人前端水平有限，只建议参考
源码：
https://download.csdn.net/download/xshsjl/19764741
实现了固定列可以滚动。
使用方式

    <div class="sf-table-box" id="scoreTable">
        <div class="sf-table-head">
            <table cellspacing="0" class="table">
                <thead class="thead-light">
                thead>
            table>
        div>
        <div class="sf-table-body">
            <table cellspacing="0"  class="table table-bordered table-striped"
                   id="dynTable">
                <tbody>
                tbody>
            table>
            <div id="tdMove" style="z-index:33333">div>
        div>
    div>

    var sfTable = $(".sf-table-box").freezeTable({
        'columnNum': fixColNum,//固定列数
        'namespace': 'sf-table-box',//命名空间
        'asyncBody': true,//是否是异步加载表体
        'destroy': destroy,//是否先销毁掉表格
        'unresize': true,//是否允许调整列宽
        'resizeback' : function (obj) {//调整列宽后的回调函数
        }，
        'callback': function () {
            dataFlow()//流加载表体
        },
    })