Angular material table horizontal scroll

Question

I want to make angular material table scroll horizontally, I was able to do that with the scss:

.table-div {
  overflow-x: scroll !important;
  
  mat-table {
     table-layout: fixed;
       mat-header-cell, mat-cell {
         overflow-wrap: normal;
         white-space: nowrap;
         overflow: visible !important;
         margin-right: 30px;
         flex: 0 0 300px;
       }
  }
}

The scroll and data worked and visible. However, the overflowed rows have no color, no border, etc.. Like the table is cut at the original width border. How can we fix that? This image shows the border of the table and how the overflowed rows have no styling when scrolled

Answer 1

From https://ampersandtutorials.com/angular/scrollable-table-in-angular-material/

Here is an stackblitz example of your issue, I have added the css needed to make the table scroll and keep the hidden elements styled

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

mat-table {
 width: 1200px;
 max-width: 1200px;
 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: auto;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}

I wrapped the material table with a div

<div class="table-responsive">
  <mat-table>
    ...
  </mat-table>
</div>