Overflow x-auto in Angular 5 material table

Question

I need to make responsive table even that would render in mobile view without breaking up. In order to make it work, I used standard HTML table link below

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

Have a look at sample: https://www.w3schools.com/howto/howto_css_table_responsive.asp

It worked great but recently switched to Angular 5 table which does not have API for responsive design. How can I make add overflow-x auto to angular table? The sample angular 5 table:

https://stackblitz.com/edit/angular-material-table-data-source-ibmgv2 Thanks in advance

Answer 1

As per your demo, just add following CSS to your css file.

.example-container.mat-elevation-z8 {    
  overflow-x: auto;
}
.example-container .mat-table.mat-table {
  min-width: 450px;
}

Hope this will help you.

Answer 2

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
}

.mat-table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
  display: table;
  border-collapse: collapse;
  margin: 0px;
}

.mat-row,
.mat-header-row {
  display: table-row;
}

.mat-cell,
.mat-header-cell {
  word-wrap: initial;
  display: table-cell;
  padding: 0px 5px;
  line-break: unset;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}

check this link it will help you.

Credit Source - https://github.com/angular/components/issues/8680#issuecomment-388358839