使表格垂直滚动，以角度4添加ngx-infinite-scroll

Question

我试图让表格可滚动使用ngx-infinite-scroll。但找不到解决方案。任何人都可以帮我或者有任何文档来使表格可以在角度4中滚动。我想只使表格体可以滚动。

试过这个css。但是没有用。

.tbody {
  height: 100px;
  overflow-y:scroll;
}

Answer 1

我终于让自己工作了！这包括桌面上的boxshadow和固定标题。希望它可以帮到某人。

CSS：

.shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.jumbotron {
  padding: 2rem 1rem;
}

tbody {
  display: block;
  height: 20rem;
  overflow: scroll;
}
thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

HTML：

<div class="shadow">
  <table class="table table-hover">
    <thead class="thead-info">
      <tr>
        <th>Title</th>
        <th>Artist</th>
        <th>Key</th>
      </tr>
    </thead>
    <tbody infiniteScroll [infiniteScrollDistance]=".1" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="false">
      <div *ngIf="!tuneService.tunes" class="text-center justify-content-center">
        <h2>Loading...</h2>
      </div>
      <tr *ngFor="let tune of page.data | async" routerLink="/tune-details/{{tune.id}}">
        <td>{{tune.title}}</td>
        <td>{{tune.artist}}</td>
        <td>{{tune.musicalKey}}</td>
      </tr>
      <app-spinner *ngIf="page.loading | async"></app-spinner>
    </tbody>
  </table>

</div>