7
창 크기를 줄이면 표 셀 데이터가 다른 셀의 데이터와 겹치고 더 이상 내 머리글과 정렬되지 않습니다. 응답 성을 높이려면 어떻게해야합니까? 나는 이미 overflow-x:auto
을 시도했는데, 내 테이블을 가로로 스크롤 할 수있게 만드는 것이 무엇입니까? 작은 화면을위한 스택 된 뷰 테이블을위한 솔루션이 아니라면 나에게도 도움이 될 것입니다.각도 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