如何实现表格行列冻结

实现原理

一、div 标签

创建多个div，div之间通过css实现层叠，每个div放置当前表格的克隆。例如：需要行冻结时，创建存放冻结行表格的div，通过设置z-index属性和position属性，让冻结行表格在数据表格的上层。同理，需要列冻结时，创建存放冻结列表格的div，并放置在数据表格的上层。如果需要行列都冻结时，则除了创建冻结行、冻结列表格的div，还需要创建左上角的固定行列表格的div，并放置在所有div的最上层。

处理表格的滚动事件，在表格横向或者纵向滚动时，同时让相应的冻结行和冻结列也同步滚动。

处理html的resize事件，同步修改表格的滚动区域宽度和高度

二、Table 标签

在 div的技术背景上，不需要依赖 滚动事件，直接使用 table 外围的容器滚动，可以带动多个 table 滚动