table固定表头固定列实现横向纵向滚动

Posted 2023-02-24

参考技术A 大致思路是：建立两个table，一个table里只有thead，一个table里只有tbody，分别把两个table用div包裹起来，设置有tbody的div固定高度，超出overflow:scroll；至于横向滚动的问题，可以设置position: sticky，然后根据左右浮动的个数及对应列所在的index，计算left或者right的长度。

因为table里thead和tbody本身无法设置高度，超出用stroll这种方式，无效。所以考虑用div来包裹，然后设置高度超出stroll，因为要实现表头固定，body滚动，所以把thead单独提出来作为一个表格，然后用定位的方式并成一个完整的表格。

sticky是position的新属性值，叫黏性定位。它是一个在static和fixed变化的属性，当你的内容位置没有超过容器范围时，它是正常布局，你设置的定位属性（left，right等)是无效的；当你的内容位置超出了容器的范围时，它会变成fixed定位，定位位置根据你设置的left，right的值来定位。
了解了sticky的用法，自然就知道怎么来实现固定列横向滚动表格了。这里贴一个thead表格的横向滚动写法，tbody的表格是一样的。

实现了竖直滚动表头固定，表头和表体可以横向滚动，但是遇到一个问题：表头和表体的滚动是分开的，各滚各的，显然不是我们要的效果，所以，需要实现表头和表体的同步滚动，这里需要用到scroll事件。
在react函数组件里，要操作组件内的dom元素，需要用到useRef来获取dom的实例。

以上，就实现了一个简易的固定表头固定列横向滚动纵向滚动的表格。