Angular Material Table Sizing/Scroll


Answer :

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

Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable