在CSS中垂直滚动的标题冻结

Question

我最近开始进行前端开发，并想问一些关于CSS的问题。

我有以下表格：

两者都可以水平和垂直滚动。它使用CSS设置样式：

<style type="text/css">
    th.col1 {
        width: 55px;
    }

    th.col2 {
        width: 45px;
    }

    th.col3 {
        width: 140px;
    }

    th.colROE {
        width: 50px;
    }

    th.col4 {
        width: 50px;
    }

    table tbody {
        overflow: auto;
        height: 700px;
        width: 900px;
    }        

    #scrollArea {
        overflow-x: scroll;
        width: 850px;
        height: 100%;
        padding-bottom: 20px;
    }

    #scrollArea {
        overflow-y: scroll;
        height: 850px;
        width: 100%;
        padding-bottom: 20px;
    }

    .ddlWidth {
        width: 100px;
    }

    #listcollection {
        width: 100%;
    }

    #municipalityTable {
        padding-left: 10px;
    }

    .CvrTextbox, .KommuneTextbox {
        width: 50px;
    }

    .EmailTextbox {
        width: 120px;
    }
</style>

由于该表支持水平和垂直滚动，我不能在CSS中使用“position：absolute”属性，因为我只想在垂直滚动期间冻结标题，而不是在水平滚动期间冻结。我想要求任何建议来获得我的要求。我可以在CSS中获得这个，还是应该使用JavaScript？