Angular Material Table Sizing/Scroll
Answer :
Add
.example-container { overflow-x: scroll; }
To the app.component.css to fix the top bar. The bottom will need a similar styling. You can't use width:100% because it is technically outside the table. So it can not pick up the width automatically.
I hope this will be help full for others to add Horizontal Scrolling to mat-table and column width according to cell content.
.mat-table { overflow-x: scroll; } .mat-cell, .mat-header-cell { word-wrap: initial; display: table-cell; padding: 0px 10px; line-break: unset; width: 100%; white-space: nowrap; overflow: hidden; vertical-align: middle; } .mat-row, .mat-header-row { display: table-row; }
Comments
Post a Comment