Make a table thead fixed and tbody have scroll - HTML and CSS

Question

I have an item listing screen and everything on it is fixed, nn can have the scroll on the side, but inside this screen has a table and this table can have the scroll but the only thing q can scroll down are the lines, the header nn. The solution I found was to make two Tables, one for the header and one for the items, only q nn I can synchronize the columns of the two Tables, follow an example code to be clearer:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
<table class="table table-bordered table-sm" style="width: 100%; margin-bottom: 0;">
  <thead class="thead-light">
    <tr>
      <th style="text-align: center; width: 4%;">#</th>
      <th style="width: 44.5%;">Nome</th>
      <th style="width: 29.5%;">Nascimento</th>
      <th style="width: 10%;">Sexo</th>
      <th style="width: 20%;">Telefone</th>
    </tr>
  </thead>
</table>
<div class="tabela-responsiva-heigth" style="width: 101.083637812%; margin-right: 25%;">
  <table class="table table-hover table-sm" style="border: 1px solid #dee2e6; width: 100%;">
    <tbody>
      <tr [ngClass]="{linhaSelecionada : objSelecionado.id === cliente.id}" (click)="setSelecionado(cliente)" *ngFor="let cliente of page.listaPaginada">
        <td style="text-align: center; width: 4%;">id</td>
        <td style="width: 44.5%;">nome</td>
        <td style="width: 29.5%;">dataNascimento</td>
        <td style="width: 10%;">sexo</td>
        <td style="width: 20%;">telefone</td>
      </tr>
    </tbody>
  </table>
</div>

the problem is q the table of the items is dessynchronizing with the table of the header, its size varies according to the scroll, if it has the scroll it is of one size, if nn has it is of another, and I’m using percentage to set sizes because I believe q is better and tbm to be responsive(I think) someone can help me?