table锁定列的一个方法.及琢磨思路

标签：http   io   ar   color   os   sp   on   div   2014   

         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; }

table锁定列的一个方法.及琢磨思路

标签：http   io   ar   color   os   sp   on   div   2014   

原文地址：http://my.oschina.net/u/1540190/blog/351484