table锁定列的一个方法.及琢磨思路-优快云博客

本文深入解析如何使用CSS实现网页布局中绿色锁定列的效果，通过设置元素定位、宽度、背景色等属性，使列在滚动时保持固定，与黄色背景形成对比，提升用户体验。

2019独角兽企业重金招聘Python工程师标准>>>

         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. 下面代码正常了。

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