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

Solution

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

Comments

[Ryan Sperzel]

I have seen this recommended like I mentioned in the question, but the problem with this solution is that it scrolls the table header. I need the table header to stay fixed on the top and i would like to scroll the table body

[Ryan Sperzel]

Doesn't seem to be working, unless I'm missing something. It just places the table body under the header. Everything still overflows and adding overflow-y: scroll to the container still scrolls the header up. Plus it's adding some strange style issues with the header (for example, the width of the header is no longer 100% of the table width)

[Ryan Sperzel]

Strangely enough, the styles on mat-header-row aren't doing anything - the position: sticky; is not making it stick at the top. Another potential problem is that I'm trying to get my scroll bar in the body of the table only, under the header. The picture below should give you a better visual of what I mean imgur.com/ashrZb5

[kushal Baldev]

cant set the height of the table in any case..!!