CSS Sticky inside a div

Question

There is anyway solution to sticky the header table inside the div "scroll"?

If i remove the div "scroll" and maintain the two tables only, inside the table responsive div, it works. But, when i wrap the scroll div, the sticky not working anymore...

HTML:

<div class="container-fluid mb-5 mt-4">
 <div id="id_header_table" class="text-center"></div>
 <div id="table-responsive" class="text-center">
    <table id="id_table" class="table table-striped table-bordered table-hover fixed-column""> 
    </table>
    <div class="scroll">
       <table id="id_table" class="table table-striped table-bordered table-hover original-columns""> 
       </table>
    </div>
</div>

CSS:

    .table-responsive{
  height: 600px;
  position:relative;
  overflow-x:auto;
}

.original-columns thead tr:nth-child(1) th{
  position: sticky;
  top: 0;
  background: white;

}

.fixed-column thead tr:nth-child(1) th{
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
}


td, th{
  white-space: nowrap;
}



.table-responsive> .fixed-column {
    background: white;
    overflow:auto;
    z-index:10;
    width:auto;
    position:absolute;
    left:0;
}

.table-responsive> .original-columns {
    background: white;
    z-index:10;
    position:absolute;
    left:0;
}

.scroll{
  overflow-x:scroll;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: #CFF5FF;
}

Thanks!