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!
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.
I hope this can also help others dealing with the width of the mat-table rows.
In this example: https://material.angular.io/components/table/examples#table-sticky-complex-flex a min-width with a fixed value in px is set for mat-rows.
To avoid having to do that you can use:
.mat-row {
min-width: max-content;
}
This will calculate the content width of the row without having to sum each column width. This will keep as well the style for the mat-row in the whole scrolling area.
In Angular 15
.table-responsive {
overflow-x: auto;
}
.table-responsive table {
white-space: nowrap;
}
From Horizontal scroll on overflow of table
This also worked, but columns were squashed together:
.mat-mdc-table {
display: block;
width: 100%;
overflow-x: auto;
}
Taken from https://stackblitz.com/edit/angular-mat-table-scroll
If you know the widths of your cells then add them all together and set that as the width of the table.
And if that sounds obvious, did you think about using calc if they're in mixed units :
Worked for me.
Note: I set min-width so if the table is less than the width of the page it should still work with other flex settings.
