title: Give mat-table a height and make mat-row scrollable
body: <p>I have a mat-table:</p>
  
  <pre><code> &lt;div class="card-body"&gt;
      &lt;table mat-table [dataSource]="filteredEntries"&gt;
        &lt;ng-container matColumnDef="date"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt;Date&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let dailyEntry"&gt;{{dailyEntry.date | date:'shortDate'}}&lt;/td&gt;
        &lt;/ng-container&gt;
        // more columns...
        &lt;tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"&gt;&lt;/tr&gt;
        &lt;tr mat-row *matRowDef="let row; columns:displayedColumns;"
            [class.cal-day-selected]="row.date.isSame(selectedDay)"
            [class.highlighted-daily-entry]="row === highlightedDailyEntry"
            [class.highlight-selected]="dailyEntriesActionQueue.includes(row) &amp;&amp; inBackoffice"
            (click)="onRowClick($event, row)"&gt;&lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I would like to give the table(or the mat-row) a height and make the <code>mat-row</code> scrollable if needed. But the problem is that height doesnt have any effect on both the <code>mat-table</code> and the <code>mat-row</code>. Im able to do it by adding a wrapper class <code>card-body</code>:</p>
  
  <pre><code>.card-body {
    height: 80vh;
    overflow-y: scroll;
  }
  </code></pre>
  
  <p>But that obviously adds a scrollbar to the entire table, not just the <code>mat-row</code>. Applying <code>overflow-y</code> and/or <code>height</code> to the <code>mat-row</code> doesnt do anything. Does anyone have an idea how to add a height to a table and make only the <code>mat-row</code> scrollable if it exceeds the height?</p>
  
  <p><strong>Edit:</strong>
  Im basically getting it to work exactly like in this <a href="https://stackblitz.com/angular/ndomlrqbkpp?file=src%2Fapp%2Ftable-sticky-header-example.html" rel="nofollow noreferrer">stackblitz</a> posted in the comments. Thats working fine, but instead of the scrollbar starting from the very top of the table, i would like it to start after the header.</p>
  
  <p>So instead of this(starting at the top of the table) <a href="https://i.stack.imgur.com/06HGf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/06HGf.png" alt="currently"></a></p>
  
  <p>i would like it to look like this(starting after the header, black bar is representing the scrollbar)</p>
  
  <p><a href="https://i.stack.imgur.com/xsF6f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xsF6f.png" alt="second"></a></p>