Header freeze for vertical scrolling in CSS

Question

I have recently started front-end development and want to ask a couple of questions regarding CSS.

I have following table:

which both can be scrolled horizontal and vertical. It is styled using 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>

and since the table supports both horizontal and vertical scrolling, I cannot use the "position: absolute" property in CSS, since I only want the header to freeze during a vertical scrolling but NOT during a horizontal scrolling. I want to ask for any advices to obtain my requirement. Can I obtain this in CSS, or should I use JavaScript ?.