如何为Angular 5 Material表格添加overflow-x:auto实现响应式

别担心，这个问题其实可以用和你之前普通HTML表格类似的思路解决，只需要给Angular Material表格套一个带overflow-x:auto的容器就行，具体步骤如下：

1. 包裹mat-table组件 #

在你的组件模板里，把整个mat-table（包括表头行、数据行等所有相关元素）放在一个自定义的div容器中：

<div class="responsive-mat-table">
  <mat-table [dataSource]="dataSource">
    <!-- 你的表格列定义 -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>
    <!-- 其他列定义... -->
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

2. 添加CSS样式 #

在组件的样式文件（.component.css）或者全局样式文件中，给这个容器类添加横向滚动的样式：

.responsive-mat-table {
  overflow-x: auto;
}

原理说明 #

这个方法和你之前用普通HTML表格的逻辑完全一致：当表格的总宽度超过容器宽度时，容器会自动显示横向滚动条，移动端用户可以通过左右滑动来查看完整的表格内容，不会出现布局崩溃的问题。

需要注意的是，Angular Material的mat-table虽然底层是用div元素构建的，但这种包裹方式依然有效——只要内部内容的宽度超过容器，滚动条就会正常触发。

如果你需要优化移动端的体验，还可以额外调整一些样式（比如缩小表头字体、减少列间距等），但核心的响应式滚动功能靠上面两步就能实现啦。

内容的提问来源于stack exchange，提问作者Vugar Abdullayev