table鎖定列的一個方法.及琢磨思路

         div { 
            width: 600px; 
            overflow-x:scroll;  
            margin-left:5em; 
            border:1px solid red;
        }
        .headcol {
            position:absolute; 
            width:5em; 
            background-color:green;
            left:0;
            top:auto;  
        }
        .long { background:yellow; letter-spacing:1em; }

這是從http://stackoverflow.com找到一個一連接，刪除多餘的css,加上色就是上圖。

原理就是：

td加上 absolute,它會脫離table的文檔流，再也不佔位。而table左邊加上margin,空出td的位置 來。td的定位仍是在div內。因此它就在那個綠色margin中了。

最最重要的是div不能加上relative.不然綠色的鎖定列就到div裏而去了。它就會隨着滾動而滾動。

現成給body加上padding:20px,會發現綠黃之間有了間隔。這是由於absolute元素向上找它的相對位置時，直接找到body元素上。absolute元素不考慮padding,而div（紅框）總體右移了。

這樣，要讓綠色不頂着左側，要加兩層div.  下面代碼正常了。

<div class='out'><div class='in'><table>

body{
    padding:20px;
}     
div.out{
    position:relative;
}
div.in {
            width: 600px;
            overflow-x:scroll;  
            margin-left:5em;
            border:1px solid red;
           
        }
 
        .headcol {
            position:absolute;
            width:5em;
            background-color:green;
            left:0;
            top:auto;  
        }
        .long { background:yellow; letter-spacing:1em; }