JSFiddle - React, Tailwind, and code Playground

HTML

<div id="vertical_scrolling_div">
    <div id="freeze_container">
        <table id="left_table" class="freeze_table">
            <tr class='tblTitle'>
                <th>Title 1</th>
                <th>Title 2</th>
            </tr>
        </table>
    </div>
    <div id="horizontal_scrolling_div">
        <table id="inner_table">
            <tr class='tblTitle'>
                <th>Title 3</th>
                <th>Title 4</th>
                <th>Title 5</th>
                <th>Title 6</th>
            </tr>
        </table>
    </div>
</div>

CSS

.tblTitle{
   position:absolute;
    top:0px;
    margin-bottom:30px;
    background:lightblue;
}
td, th{
    padding:5px;
    height:40px;
    width:40px;
    font-size:14px;
}

#vertical_scrolling_div{
    display:inline-block;
    zoom: 1;
    *display:inline;
    padding-top:40px;
    height:300px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#freeze_container{
    display:inline-block;
    zoom: 1;
    *display:inline;
    vertical-align:top;
    width:100px;
}
#horizontal_scrolling_div{
    display:inline-block;
    zoom: 1;
    *display:inline;
    width:200px;
    overflow-x:scroll;
    vertical-align:top;
}

.freeze_table{   
    background-color: #0099dd;
    z-index:2;
}

#left_table{
    width:100px;
}

#inner_table{
    width:400px;
    overflow:hidden;
}

JavaScript

$(function(){  
    function getRows(rows, cols){
        var rowString="";
        for(var i=0;i<cols;i++){
            rowString+="<tr>"; 
            for(var j=0;j<rows;j++){
                rowString+="<td>"+j+","+i+"</td>";
            }
            rowString+="</tr>"; 
        }
        return rowString;
    }
    
    $("#left_table").append(getRows(2,10));
    $("#inner_table").append(getRows(8,10));
});