純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框架就行了。