双向滚动表，标题仅使用 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 可能就是您要找的。​​p>

试试这个：

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

并删除overflow 和height 规则。