修复重叠的嵌套Div元素

Question

我正在React中创建一个数据表网格，目前我能够用我的代码渲染我的虚拟数据。但是问题是标题行与第一数据行重叠，这很烦人

这是我的标记：

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

我拥有的CSS：

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

问题是我看到我的第一个数据行与标题行（class ='Table_table-header'）完全重叠。

已经花了数小时试图立即解决此问题。

任何帮助将不胜感激！

在位置：绝对位置，位置：相对之间更改容器切换的css