我按照这个表格示例来使用 react material-ui 框架，并且我正在寻找一种可能性，当我有很多列时，可以使我的表格水平滚动。
例如，我有许多列被压缩以适应页面宽度，因此它们的内容被缩短了。
我认为它在 material-ui 规范中通过链接Display the full column content and enable horizontal scrolling in the table container 进行了描述。
所以我想知道在material-ui中是否可能。
在多列的material-ui表上添加水平滚动的方法是什么？
IT技术
css
reactjs
material-design
material-ui
2021-05-25 12:04:43
3个回答
只有溢出-x 是不够的。还需要向列添加“flex-basis”和“flex-shrink”属性。在下面的示例中，将 35% 的 flex-basis 添加到 3 列会将表格宽度增加到 105%，并且 'flex-shrink: 0' 确保在宽度不够时不会缩小列：
应用程序组件.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%;
}
我刚开始接触 React，对 material-ui 表不熟悉。
但是，可以使 HTML 表格允许使用 css 水平滚动。你可以做：
.YourTableClassName {
overflow-x: auto;
}你可以简单地使用
overflow-x: auto;
这是一个只与 HTML 通信而不与 react 通信的技巧