Can't set height on Angular Material table.. height overflows container

Question

I'm using an Angular Material table and having (a lot of) trouble forcing the table to be a certain height. Right now the table is overflowing its container when there's enough data given to it. I thought if I gave the container div a fixed height (I gave it a fixed height and max-height actually), that I could then give its child something like height: 500px;. Obviously that's not working - the table element is not listening to any height I give it.

I've seen it recommended to just give the container a height and overflow: auto; which does ultimately contain the table inside the container, but the <th> is not fixed at the top and scrolls out of sight which is not the behavior I'm looking for. I would like to put a scrollbar on the <tbody> and be able to scroll that, but keep that scroll separated from the category names in the <th> (that should remain fixed at the top).

Is this just strange HTML table behavior? I'm not too familiar with HTML tables but expected them to behave like all other HTML elements. How can I fit the table element into its container without scrolling the entire thing?

You can find my code to render the table below:

// table.component.html

  <div class="table-container">
    <table [dataSource]="items" class="table" mat-table>
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> ID </th>
        <td  mat-cell *matCellDef="let item"> {{item.id}} </td>
      </ng-container>

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

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

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

// table.component.scss

.table-container {
  width: 100%;
  min-width: 445px;
  max-width: 1459px;
  height: 500px;
  max-height: 500px;
  border: 1px solid black;
  border-radius: 6px;
  box-sizing: border-box;
}

.table {
  width: 100%;
  height: 500px;
  max-height: 500px;
  line-height: 19px;
  font-size: 5.5px;
  border-collapse: collapse;

  td {
    border-bottom: none;
    padding: 30px;
  }

  th {
    border-bottom: 1px solid #A4B8CA;
    padding: 30px;
  }
}

Answer 1

You just need to set the table height.

and dont forget the sticky :

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>

in your table.

<div class="table-container">
    <table [dataSource]="items" class="table" mat-table>
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> ID </th>
        <td  mat-cell *matCellDef="let item"> {{item.id}} </td>
      </ng-container>

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

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

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

.scss file

table{
  min-height: 500px;
  max-height: 500px;
  overflow: auto !important;
}