Angular Material table Sizing/Scroll

Question

I have an Angular Material table with many columns. It is wider than the screen. When I scroll, the table rows extend past the edge of the table container.

See this StackBlitz project. https://stackblitz.com/edit/angular-r6xdgk Use the scrollbar at the bottom and you will see the strange formatting.

Thanks in advance for any help!

Answer 1

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.

Answer 2

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