css - 在多列的material-ui表格上添加水平滚动的方法是什么？

Question

我关注 this table example对于 React material-ui 框架，我正在寻找一种可能性，当我有很多列时，可以使我的表格水平滚动。

例如，我有许多列被压缩以适应页面宽度，因此它们的内容被缩短了。

我认为它在 material-ui 规范中通过链接 Display the full column content and enable horizontal scrolling in the table container 进行了描述.

所以我想知道在material-ui中是否可行。

Answer 1

只有 overflow-x 是不够的。还需要向列添加“flex-basis”和“flex-shrink”属性。在下面的示例中，将 35% 的 flex-basis 添加到 3 列会将表格宽度增加到 105%，并且 'flex-shrink: 0' 确保列在宽度不够时不会收缩:

app.component.html

<mat-table #table [dataSource]="payments" matSort class="mat-elevation-z8 overflow-x-auto">
  <ng-container matColumnDef="payment_hash">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Payment Hash</mat-header-cell>
    <mat-cell *matCellDef="let payment">{{payment?.payment_hash}}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="path">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Path</mat-header-cell>
    <mat-cell *matCellDef="let payment">{{payment?.path}}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="payment_preimage">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Payment Pre Image</mat-header-cell>
    <mat-cell *matCellDef="let payment">{{payment?.payment_preimage}}</mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

应用程序组件.css

.overflow-x-auto {
  overflow-x: auto;
}

mat-header-cell, mat-cell {
    /* 
    flex-shrink: 0;
    flex-basis: 35%;
    */
    flex: 0 0 35%;
}