纯 CSS 的固定表头和首列

将以下代码保存为网页文件后用非 IE 浏览器打开。

    
    
    
    
    
    



    

        

            

                
字段 {{i+1}}
            
        
        

            

                
{{j+1}}
            
        
    

原理很简单，就是使用 CSS3 的 position: sticky 。它的作用就是当元素滚动到边界时保持固定。

该样式单独使用没有效果，必须同时加上 top、left 等定位的样式，这样浏览器才能知道固定到什么位置。

固定效果使用的是纯 CSS，没有任何脚本。示例代码中使用了 Vue ，主要是为了动态生成一个大的表格以体现固定效果。