कोणीय 2 सामग्री डिजाइन उत्तरदायी सारणी

Question

जब भी मैं अपने खिड़की के आकार को निचोड़ता हूं, तालिका सेल डेटा अन्य सेल के डेटा के साथ ओवरलैप करता है और वे अब मेरे हेडर से गठबंधन नहीं होते हैं। इसे उत्तरदायी बनाने के लिए मुझे क्या करना चाहिए? मैंने पहले से ही overflow-x:auto का प्रयास किया है, क्या ऐसी कोई चीज है जो मेरी तालिका को क्षैतिज रूप से स्क्रॉल करने योग्य बनाती है। यदि नहीं, तो छोटी स्क्रीन के लिए स्टैक्ड व्यू टेबल के लिए कोई समाधान यह मेरे लिए भी काम करेगा।

<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; 
} 

मुझे बताओ अगर यह आप सूट।