Angular 2 Material 设计响应表

Question

每当我缩小窗口大小时，表格单元格数据就会与其他单元格的数据重叠，并且它们不再与我的标题对齐。我应该怎么做才能使其响应？我已经尝试过 overflow-x:auto，是否有任何东西可以让我的表格水平滚动。如果不是，那么适用于较小屏幕的堆叠 View 表的任何解决方案也适用于我。

<div fxLayout="column" fxFlex="80" class="scrollable-table"  >

  <ng-container>

    <md-table class="mat-body-1 responsive-table" #table [dataSource]="viewModelSource">        
      <ng-container mdColumnDef="id" style="margin-right:200px;">
        <md-header-cell *mdHeaderCellDef class="ngBold"> ID </md-header-cell>
        <md-cell *mdCellDef="let row" routerLink="{{__PAGE_ROUTE}}{{row.id}}">
          {{row.id}}<br/>
        </md-cell>
      </ng-container>
      <ng-container mdColumnDef="sapCode">
        <md-header-cell *mdHeaderCellDef class="ngBold"> Sap Code </md-header-cell>
        <md-cell *mdCellDef="let row"> {{row.sapCode}} </md-cell>
      </ng-container>
      <ng-container mdColumnDef="divisionName">
        <md-header-cell *mdHeaderCellDef class="ngBold"> Division </md-header-cell>
        <md-cell *mdCellDef="let row">{{row.divisionName}} </md-cell>
      </ng-container>
      <ng-container mdColumnDef="faxNo">
        <md-header-cell *mdHeaderCellDef class="ngBold"> Fax </md-header-cell>
        <md-cell *mdCellDef="let row"> {{row.faxNo}} </md-cell>
      </ng-container>
      <ng-container mdColumnDef="gst">
        <md-header-cell *mdHeaderCellDef class="ngBold"> GST </md-header-cell>
        <md-cell *mdCellDef="let row"> {{row.gst}} </md-cell>
      </ng-container>

      <ng-container mdColumnDef="ntnNo">
        <md-header-cell *mdHeaderCellDef class="ngBold"> NTN </md-header-cell>
        <md-cell *mdCellDef="let row"> {{row.ntnNo}} </md-cell>
      </ng-container>
      <ng-container mdColumnDef="phoneNo">
        <md-header-cell *mdHeaderCellDef class="ngBold"> Phone No </md-header-cell>
        <md-cell *mdCellDef="let row"> {{row.phoneNo}} </md-cell>
      </ng-container>
      <ng-container mdColumnDef="shortName">
        <md-header-cell *mdHeaderCellDef class="ngBold"> Short Name </md-header-cell>
        <md-cell *mdCellDef="let row"> {{row.shortName}} </md-cell>
      </ng-container>
      <ng-container mdColumnDef="title">
        <md-header-cell *mdHeaderCellDef class="ngBold"> Title </md-header-cell>
        <md-cell *mdCellDef="let row"> {{row.title}} </md-cell>
      </ng-container>
      <ng-container mdColumnDef="website">
        <md-header-cell *mdHeaderCellDef class="ngBold"> Website </md-header-cell>
        <md-cell *mdCellDef="let row"> {{row.website}} </md-cell>
      </ng-container>
      <ng-container mdColumnDef="address">
        <md-header-cell *mdHeaderCellDef class="ngBold"> Address </md-header-cell>
        <md-cell *mdCellDef="let row"> {{row.address}} </md-cell>
      </ng-container>          
      <md-header-row *mdHeaderRowDef="displayedColumns" class="ngBackground"></md-header-row>
      <md-row *mdRowDef="let row; columns: displayedColumns;"></md-row>
    </md-table>

  </ng-container>
</div>

Answer 1

来自:https://github.com/angular/material2/issues/8680#issuecomment-348273320

(我添加了 https://github.com/angular/material2/issues/8680#issuecomment-358187897 )

我最终做出了自己的修改:

.mat-row, .mat-header-row {
  width: 450vw; //PERSONALLY I HAD 45 COLUMNS
}
.mat-header-row { //THIS MAKES THE HEADER STICKY
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1;
  background-color: inherit;
}
.table { //OR WHATEVER YOU CALL THE mat-table
  overflow: scroll;
}

告诉我这是否适合你。