Angular material table horizontal scroll-CodePudding

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

CodePudding user response：

Here is an 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 >
  <mat-table>
    ...
  </mat-table>
</div>

CodePudding user response：

It sounds like the table rows are overflowing outside of the table's borders and they're not being styled properly. Here are a couple of things you can try to fix this issue:

You can try to wrap the table in a container div with the class "table-div" and set its width to a fixed value, this will make sure that the table is displayed within the borders.

Another option is to give the "mat-table" class a fixed width, as well as the "mat-header-cell" and "mat-cell" classes. This will also make sure that the table does not overflow beyond its boundaries.

If the table cells are not styled, try to set a border for the table and cells, this can be done by using mat-table {border: 1px solid #000;} and mat-header-cell, mat-cell {border: 1px solid #000;}

Try to set overflow-y property of the table-div to scroll too, this can be done by adding overflow-y: scroll;to the table-div class

You can also try to set the display property of mat-header-cell and mat-cell classes to 'inline-block', so they will be treated as elements with a width and a height and that can be styled.