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.