Table A method that locks a column. And pondering the thinking

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

This is to find a link from http://stackoverflow.com, remove the extra CSS, plus the color is.

The principle is:

TD Plus Absolute, it will be out of table document flow, no longer occupy a bit. and the table to the left with margin, empty TD position. TD positioning is still within the div. So it's in the green margin.

The most important thing is that Div cannot add relative. Otherwise the green Lock column goes to the Div. It scrolls as it scrolls.

Ready to Body plus padding:20px, you will find a gap between green and yellow. This is because the absolute element is located directly on the BODY element when it finds its relative position. The absolute element does not take padding into account, and the div (red box) moves the whole right.

In this way, to make the green not on the left side, to add two layers of div. The following code is OK.

<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 A method that locks a column. And pondering the thinking