Vertical scroll inside the table

Question

I am working on an Angular application which has a mat-table. I'd like to make the table scrollable with sticky headers. But, the scrollbar seems to appear outside the table.

I have tried using a container with height and overflow properties, but couldn't succeed in placing the scrollbar inside the table. Same result with npm packages like ngx-scrollbar and perfect-scrollbar.

Is there a way to set the scrollbar inside the table using pure css?

Mat-table

Stackblitz: https://stackblitz-starters-e2ugui.stackblitz.io

Edit:

app.component.html

<div class="my-table">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <!--- Note that these columns can be defined in any order.
      The actual rendered columns are set as a property on the row definition" -->

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef>No.</th>
      <td mat-cell *matCellDef="let element">{{ element.position }}</td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-cell *matCellDef="let element">{{ element.name }}</td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <th mat-header-cell *matHeaderCellDef>Weight</th>
      <td mat-cell *matCellDef="let element">{{ element.weight }}</td>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <th mat-header-cell *matHeaderCellDef>Symbol</th>
      <td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
    </ng-container>

    <tr
      mat-header-row
      *matHeaderRowDef="displayedColumns; sticky: true"
      style="#A8ACAA"
    ></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
</div>

app.component.css

.my-table{
  height:400px;
   overflow:auto;
}

Answer 1

It involves a lot of changes using flexbox and I cannot guarantee it's the best solution for all scenarios, but you can achieve it using display:flex on the table and setting overflow-y: scroll on the tbody of the table.

css

/* Add application styles & imports to this file! */
@import 'node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css';

.my-table {
  overflow: hidden !important;
}
.my-table table[mat-table] {
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
}
.my-table table[mat-table] {
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  height: inherit;
}
.my-table table[mat-table] thead tr {
  display: flex;
  align-items: center;
  justify-content: center;
}
.my-table table[mat-table] thead tr th {
  display: flex;
  flex: 1;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.my-table table[mat-table] tbody {
  overflow-y: scroll !important;
}
.my-table table[mat-table] tbody tr {
  display: flex;
  align-items: center;
  justify-content: center;
}
.my-table table[mat-table] tbody tr td {
  display: flex;
  flex: 1;
  height: 100%;
  align-items: center;
  justify-content: center;
}

html

<div class="my-table">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <!--- Note that these columns can be defined in any order.
      The actual rendered columns are set as a property on the row definition" -->

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef>No.</th>
      <td mat-cell *matCellDef="let element">{{ element.position }}</td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-cell *matCellDef="let element">{{ element.name }}</td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <th mat-header-cell *matHeaderCellDef>Weight</th>
      <td mat-cell *matCellDef="let element">{{ element.weight }}</td>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <th mat-header-cell *matHeaderCellDef>Symbol</th>
      <td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
    </ng-container>

    <tr
      mat-header-row
      *matHeaderRowDef="displayedColumns; sticky: true"
      style="#A8ACAA"
    ></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
</div>

StackBlitz demo