版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/arvin_top/article/details/84942433
固定列&表头
对于表格信息来说，往往有些信息是重要的，需要一目了然的看清楚，而不是通过滚动才能看到用户需要的信息。将关键的表格列进行固定，而次要信息放置在可滚动查看的容器中，可以突出表格信息的重要性，同时，对于方便用户更好的在当前窗口进行交互，而不需要更多的操作。
对于以上两种交互的优化，Ant Design - A UI Design Language给出了很好的示例。
对于固定头和列的表格数据交互方式，现有的组件库均有对应的实现，比较常见的对应有：
- React：Ant Design - A UI Design Language
- Vue：Element，iView - A high quality UI Toolkit based on Vue.js
- Regular: 表格 - nek-ui
布局
在考虑表头和列进行固定时，我们首先需要考虑的是如何对表格进行布局来同时满足上下和左右的滚动。
1，如果依据左右滚动布局，那么整个表格分为左，中，右三部分，中间overflow左右滚动。那么，如果同时满足表头固定后，body上下滚动，需要js事件监听中间部分的上下滚动，同时对左右表格的body部分进行滚动。
2，如果依据上下滚动布局，那么，整个表格将分为两大部分，thead和tbody，内容部分溢出后滚动。那么，如果需要同时满足中间部分进行左右滚动，需要在tbody左右滚动时，同时控制thead的中间进行滚动，需要js监听tbody的scroll事件，对thead进行滚动。
这两种方式均需要通过js监听scroll事件，来满足另一部分的滚动事件，示例的demo比较简陋。对比这两种方式，可以说实现上都差不多，现有组件库的实现均为第一种方式。采用这一类布局的共同点和优势如下：
- 将表头和内容分开为两部分，便于控制表头固定。
- 通过布局满足上下或者左右的滚动，通过js控制另一方向的滚动，相对于完全通过js控制滚动更有优势。
- 需要特别注意的一点是，中间内容的表格需要包含左右固定的两列，而不是完全拆分，左右固定的列仅仅是通过固定布局覆盖现有的数据。这样做的优势是保证在中间部分滚动的时候，滚动条属于整个table表格而不是中间部分，给用户视觉上的整个表格滚动的交互体验，这样也保证了一个方向上的完全滚动。
- 左右滚动布局需要在body滚动的同时控制左侧固定列和右侧固定列同时滚动，相对于上下滚动布局仅仅需要控制表头内容左右滚动来说，减少一次计算控制。本以为布局2在数据量大的情况下，相对布局一发生抖动的可能性更大，但是在5000行数据测试下（仅测试chrome），发现滚动时，两者相差不大。