Angular 2 Material Design Audit Tables

Question

Whenever I squeeze the window size, the cell data of the cell overlaps with the other cell data and they no longer align with my title. What to do to make it responsive? I already tried overflow-x:auto , is there anything that makes my table scroll horizontally. If not, then any solution for table spreadsheet tables for small screens will also work for me.

 <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

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

(I added https://github.com/angular/material2/issues/8680#issuecomment-358187897 )

As a result, I made my changes:

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

Tell me if this suits you.