纯CSS（基于CSS3）实现表格固定行列（附：样式与JS配置实现固定列行）

方法一、CSS3（position:sticky）实现固定行与列

这个是我正在使用的固定行列的方式，使用的新最的CSS3样式：position:sticky。

感觉上去这个样式与position:fixed非常像。

差异在两个地方：1、但是fixed是相对于body元素，而sticky是相对于（第一个定位不为static的）父级容器；2、虽然已经定位position起来了，但是仍然还是在原来的位置进行占位。

实现步骤：

1、指定父级窗口的高与宽

2、为需要固定的单元格绑定指定样式position:sticky（搭配top与left实现行固定或列固定）

PS：请指定固定单元的格的背景色与z-index，否则会有一些意外发生

DEMO地址：https://jsfiddle.net/timfeng2009/bh27kmrf

方法二、CSS3（translateY）实现固定行头

CSS3的新属性translate，该属性允许我们对元素进行旋转、缩放、移动或倾斜。

我们使用其中的translateY，进行Y轴变形（理论可以扩展到列上进行translateX的变形），在滚动条进行滚动的时候，与滚动条同步进行Y轴变形：translateY(' + scrollTop + 'px)

实现步骤：

1、指定父级容器的高

2、在容器内绑定scroll事件，在滚动时动态调整thead的样式属性：translateY(' + scrollTop + 'px)

DEMO地址：https://jsfiddle.net/timfeng2009/17hx2y9v/

方法三、传统方案（以上因为使用CSS3的新样式属性会有兼容性方面的问题）

先了解一下传统方案：

1. 指定容器的高宽，并设置为position:relative;
2. COPY需要固定的行为一个table，放置容器内并设置为position:absolute。
3. COPY需要固定的列为一个table，放置容器内并设置为position:absolute。
4. COPY需要固定的交叉列为一个table，放置容器内并设置为position:absolute。
5. 将原table设置为position:absolute。
6. 窗口上绑定scroll事件，动态调整三个copy出来的表格的top与left

DEMO地址：https://jsfiddle.net/timfeng2009/9dmw3xaf/

题外话：目前主流的UI框架的组件里都已经实现了表格的固定行列，懒得看的就直接用UI框架就行了。