Fix Overlapping Nested Div Elements - css

Question

I am creating a data table grid in react, currently I am able to render my dummy data with my code. But the problem is that the header row is overlapped by the first data row, which is very annoying
This is the markup I have :
<div class='Table_table'>
<div class='Table_table-header'>
<div style="height:30px;">
<div class='table_fixed-cols'>
</div>
<div class='Table_x-scroll header'>
<div class='table_row'>
<div class="table_cell"> Name </div>
<div class="table_cell"> Age </div>
<div class="table_cell"> Location </div>
</div>
</div>
</div>
</div>
<div class='table-container'>
<div class="table_fixed-cols">
<div class="table_row even"><div>
<div class="table_row even"><div>
<div class="table_row even"><div>
</div>
<div class="table_x-scroll">
<div class="table_row even">Dana</div>
<div class="table_row ">57</div>
<div class="table_row even">San Francisco</div>
</div>
</div>
</div>
</div>
The CSS I have:
.Table__table{
position: relative;
overflow-y: hidden;
}
.table__cell{
border-right: 1px solid black !important;
padding: 3px 5px !important;
position: absolute;
}
.table__row{
display: flex !important;
position: absolute!important;
margin-top: 1%;
left: 0 !important;
/* overflow: auto!important; */
}
.table_fixed-cols{
top:0 !important;
left: 0 !important;
z-index: 100 !important;
overflow: hidden !important;
position: absolute !important;
}
.table_x-scroll{
overflow:hidden;
position: absolute;
top: 0;
right: 0;
z-index: 0;
}
The thing is that I see my first data row completely overlapped with the header row ( class='Table_table-header' ).
Have been spending hours on trying to fix this issue now..
Any help would be much appreciated !
change css for container switch between position: absolute, position: relative