通过纯CSS冻结列

下面是一个示例，通过它我可以通过纯CSS冻结我的第一列

HTML:

问题是我想根据容器高度隐藏溢出的列，列应该按照垂直滚动移动。它只能水平冻结。这可以通过纯CSS实现吗？ 以下是js提琴，更清晰：

---

感谢您的回复

唯一的区别是我有固定的高度和溢出-x:auto，固定的列不会像其他列那样垂直滚动……我不确定你到底在问什么？你的意思是隐藏第一列吗？我试图实现以下行为，但通过纯css：请检查第一列，它仅在水平滚动时冻结如何使用iframe？

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

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