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!

score 22 · Answer 1 · edited Nov 20 '19 at 17:21

22

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

edited Nov 20 '19 at 17:21

adiga

34,372
9
61
83

answered Nov 20 '19 at 15:19

Muhammad Sohail

828
9
18

1

Awesome. It works perfectly. The accepted answer didn't work form me. – Hernán Acosta Feb 19 '20 at 13:39
1

this saved my day, none of other many answers in questions worked for me – Mohammed Fayed Jun 22 '20 at 10:27
1

fantastic snippet! – themightylc Jun 17 '21 at 01:53

score 12 · Accepted Answer · answered Jun 12 '18 at 19:53

12

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.

answered Jun 12 '18 at 19:53

Anthony DiTomasso

546
3
7

score 3 · Answer 3 · answered Jun 21 '21 at 12:27

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.

rofrol · Answer 4 · 2023-04-25T11:09:15.357

2

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

edited Apr 25 '23 at 11:09

answered Apr 25 '23 at 10:06

rofrol

14,438
7
79
77

score 0 · Answer 5 · answered Feb 07 '21 at 06:59

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.

Angular Material table Sizing/Scroll

5 Answers5

Linked