7
每当我挤压我的窗口大小,表单元格数据与其他单元格的数据重叠,他们不再与我的标题对齐。 我该怎么做才能让它响应? 我已经试过overflow-x:auto
,有什么让我的桌子水平滚动的。如果没有,那么对于较小屏幕的堆叠视图表的任何解决方案,它也将适用于我。Angular 2材料设计响应表
<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>
你说过,“堆叠视图......也适用于我”。那些对这种解决方案感兴趣的人可以在https://github.com/angular/material2/issues/8494上添加赞誉,因为当更多人表现出兴趣时,团队将有更多理由来优先考虑这个功能。 – Marcus