Как сделать фиксированный header у таблицы html

Уже день мучаюсь Ангуляр проект прилетают данные по рест запросу , и надо отрисовать в таблице только чтобы заголовок оставался на верху а полоса прокрутки появилась но вот проблема - если мы фиксируем заголовок то он фиксируется по всем направлениям - мне так не надо, мне надо чтобы таблица осталась такой же резиновой чтобы на телефоне она отображалась нормально.

вот результат моих страданий:

    tbody {
  display: block;
  overflow: auto;
  height: 500px;
  width: 100%;
}

thead tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
table {
  display: inline-block;
  vertical-align: top;
}
thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead {
  width: calc( 100% - 1em )
}

<div class=" table-responsive">
    <table class="table ">
      <thead class="thead-light">
      <tr  class="position-relative">
        <th class="align-middle text-center" scope="col">Дата</th>
        <th class="align-middle text-center" scope="col"></th>
        <th class="align-middle text-center" scope="col">dssacssacascsacsac</th>
        <th class="align-middle text-center" scope="col">ascsacsacsacsacsacsac</th>
        <th class="align-middle text-center" scope="col">ascsacsaxxxxxxxxxxxxxxxxx</th>
        <th class="align-middle text-center" scope="col">saaaaaaaaaaaaaaaaaaaa</th>
        <th class="align-middle text-center" scope="col">ssssssssssssssssssssssssssssss</th>
        <th class="align-middle text-center" scope="col">sssssssssssssssssssssssssssssss``</th>
      </tr>
      </thead>
      <tbody style="height: 500px!important;">
      <tr *ngFor="let statistic of rosTourismList">
        <th class="align-middle text-center" scope="row">{{statistic.rowDate | date : "dd.MM.yyyy"}}</th>
        <th class="align-middle text-center" scope="row">{{statistic.rowDate | date : "E" | dayWeek }} </th>
        <td class="align-middle text-center">{{statistic.asdsa}}</td>
        <td class="align-middle text-center">{{statistic.wqewd}}</td>
        <td class="align-middle text-center">{{statistic.rtrtrtr}}</td>
        <td class="align-middle text-center">{{statistic.rtr}}</td>
        <td class="align-middle text-center">{{statistic.xcxcvxc}}</td>
        <td class="align-middle text-center">{{statistic.xcvxcvd}}</td>
      </tr>
    
      </tbody>
    </table>
  </div>

Но вот с телефона отображение ужасное, вопрос как поправить может есть какие то готовые решения? всё что находил упорно не хотело работать, если у вас есть какая нить заготовка прошу скинуть с примером