两个方向滚动表，只使用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规则。