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规则。

双向滚动表，仅使用sass固定标题

1 个答案: