таблица прокрутки в обоих направлениях с фиксированным заголовком только с использованием sass

Question

У меня есть таблица угловых

     <table class="table">
<thead>
  <tr>
    <td *ngFor="let header of objectKeys(tableContents[0])">{{header}}</td>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let content of tableContents">
    <td *ngFor="let key of objectKeys(content)">{{content[key]}}</td>
  </tr>
</tbody>

Я должен настроить их высоту в соответствии с экраном, а затем сделать прокрутку в обоих направлениях с фиксированным заголовком и экраномразмер будет размером с мобильный телефон.Я пытался использовать много ресурсов, но все использовали javascript для горизонтальной прокрутки, который я не могу использовать.Вот что я попробовал .. Это делает заголовок не прокручиваемым, а также уменьшает его ширину.

 .table{
border-collapse: collapse;

thead{

    td{
        padding: 4px;
        background-color: $filter-background;
        color: $white;
    }
    tr,td{
        border: 2px solid $input-border2; 
        padding: 2px;
    }
}
tbody{
height:100px;
display: block;
overflow-y: scroll;
    tr:nth-child(odd){
    background-color: $input-background;
    }
    tr,td{
        border: 2px solid $input-border2; 

    }
    width: 400px;
 }
 display: block;
  overflow-x: auto;
}

Answer 1

position: sticky может быть тем, что вы ищете.

Попробуйте:

thead td {
  position: sticky;
  top: 0;
}

И удалите правила overflow и height.