Angular Material table Sizing/Scroll
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;
}
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.