Angular 2材料設計響應表

每當我擠壓我的窗口大小，表單元格數據與其他單元格的數據重疊，他們不再與我的標題對齊。我該怎麼做才能讓它響應？我已經試過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>

來源

2017-10-07 arkhan

你說過，「堆疊視圖......也適用於我」。那些對這種解決方案感興趣的人可以在https://github.com/angular/material2/issues/8494上添加讚譽，因爲當更多人表現出興趣時，團隊將有更多理由來優先考慮這個功能。 – Marcus

來自：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; 
}

告訴我，如果這適合你。

來源

2018-02-27 13:29:40 tatsu

Angular 2材料設計響應表

回答

相關問題