Overflow x-auto in Angular 5 material table

Issue

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

Solution

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.

Answered By – kravisingh

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.