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