Overflow x-auto in Angular 5 material table


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

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:

Thanks in advance


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.