通过纯CSS的冻结列

Question

以下是我可以通过纯CSS将第一列冻结的示例。

HTML：

<div><table>
    <tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry.s</td>
            <td class="long">Column 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            <td class="long">Column 4 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            <td class="long">Column 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            <td class="long">Column 4 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
        </tr>
        <tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr>
        <tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr><tr>
            <td class="headcol">Column 1</td>
            <td class="long">Column 2</td>
            <td class="long">Column 3</td>
            <td class="long">Column 4</td>
        </tr>
</table></div>

CSS：

body { font:normal 14px Arial; padding:10px}
table { border-collapse:separate; border-top: 1px solid grey; }
td {
    margin:0;
    border:1px solid grey; 
    border-top-width:0px; 
    border-right-width:0px; 
    white-space:nowrap;
}
div { 
    width: 600px; 
    height: 200px;
    overflow-x:auto;  
    overflow-y:visible;
    padding-bottom:1px;
    margin-left:50px;
}
.headcol {
    position:absolute; 
    background: white;
    border-top-width:1px; /*only relevant for first row*/
    border-right-width:1px; 
    margin-top:-1px; /*compensate for top border*/
    }
td { padding: 5px; }

问题是我想根据容器高度隐藏溢出的列，列应按垂直滚动移动。它应该只是水平冻结。这可以通过纯CSS吗？ 这里是js小提琴，更清晰： http://jsfiddle.net/YMvk9/5410/

感谢您的回复...