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

依赖框架

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的经验和研究下，这次准备去两者所长，写了一种满足业务需要的表格框架。
效果图：

表格结构