表格固定表头和列
适用场景
当界面需要显示大量数据，但又不想引入额外第三方表格组件时，就可以通过自定义表格组件加虚拟列表，实现大数据量表格的性能优化
前置知识
css table-layout:fixed: 表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。(列宽可以由 table 的宽度属性或者 col 元素决定来决定) 浅谈表格组件的实现：固定表头和固定列css position:sticky: 元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。can i use: stickyhtml colgroup, col: 也可以设置列宽和列背景色
测试前置知识
table-layout:fixed 之后使用 colgroup, col 控制列宽
注意
总宽度超出滚动容器宽度时，每列都必须设置宽度，否则未设置宽度的列，会被压缩，就像这个示例一样
注意
未设置table-layout:fixed则colgroup和col设置会非预期
col 设置无效的情况
table 未设置 100%, 则 col 宽度超出之后，col 设置无效
col 设置宽度无效
table未设置宽度百分百，则 col 设置的总宽度超出容器的宽度之后，col 设置无效，且相互之间会挤占列宽
table 设置 white-space: nowrap 后，col 设置宽度无效
col 设置宽度无效
table 设置 white-space: nowrap 后，col 设置宽度无效
固定表头
双表格实现方式
优点
- 兼容性强
缺点
- 实现略微复杂
- 固定列方式难以实现
原理
- 双表格，一个实现表头，一个实现表体
- 表头 overflow-x:hidden, 表体 overflow:auto (让表体能出现滚动条)
- 通过 colgroup 和 col 统一两个表格的列宽度
- 表头多增加一个 th，用于实现对表体的纵向滚动条占位
- 监听表体的横向滚动，并将 scrollLeft 设置到表头，实现级联的横向滚动
说明
实现双表格，以及纵向滚动条
说明
实现纵向滚动条以及初步解决列宽不一致问题
说明
级联横向滚动
说明
表头表格添加一个额外的th最终解决纵向滚动条导致的列宽不一致问题
纯 css 实现方式
优点：
- 实现简单
- 能够轻松的实现固定表头和固定列
缺点：
- 需要考虑 sticky 的兼容性
- 顶部 sticky 有大约 1px 的间隙，侧边 sticky 也有大约 1px 的间隙
- 必须设置背景色
- 必须设置 z-index
- 列宽无法再自定义，单元格内容一定会强制在一行显示