In Mat table Not able to specify height of the table and make the header as well as footer sticky

Question

I have a Mat table with Header and beneath the table I have added a paginator component , I have adjusted paginator component to be as a footer seen in both the images.

Now the question is I want Rows to be scrollable with the tables Header and Footer(i.e Paginator Component) to be fixed at one place.

But Currently As shown in the second Image if I select the 10 rows then the height of the table increases and I get the Scroll on the main Div.

Tried hard for hours but wasn't able to do it I will put the Exact Code which I have Written so that It can be better ShowCased.

Below is my html file

<div class="outerDiv">
<div class="table-container">
  <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    <!-- Position Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
      <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>
  
    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>
  
    <!-- Weight Column -->
    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
      <td mat-cell *matCellDef="let element"> {{element.email}} </td>
    </ng-container>
  
    <!-- Symbol Column -->
    <ng-container matColumnDef="phone">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Mobile Number </th>
      <td mat-cell *matCellDef="let element"> {{element.phone}} </td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

<div class="paginator">
  <mat-paginator [length]="2"
  [pageSize]="5"
  [pageSizeOptions]="[5, 10]">
</mat-paginator>
</div>

</div>

Below is My css file

.mat-table {
  overflow: auto;
  max-height: 500px;
}
  
  th.mat-sort-header-sorted {
    color: black;
  }

  .table-container{
    margin-top: 10px;
    max-height: 300px;
    overflow: auto
  }
 

  .outerDiv{
    display: block;
    padding-left: 226px;
    padding-top: 67px;
    padding-bottom: 67px;
  }

  .paginator{
    margin-right: 155px;
    width: 100%;
    max-width: 80%;
    position: sticky;
  }

Now the table with 10 rows

Answer 1

This is a purely css problem. For making header sticky add sticky to mat-header-row

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

To make paginator sticky wrap table in a div and put paginator outside that div (make sure to add mat-elevation-z0 class to table so there is no shadow between table and paginator or add custom shadow class in table and paginator).

I have made a updated stackblitz for you (please view in full size screen).

Answer 2

As i told earlier Scroll is coming on div because there is a table in that div as well as top-bottom paddding of (30+30) px in vertical direction as you can see in image below.

we can remove this problem by 2 solution

1. use margin instead of padding as we know margin are spaces outside any div not inside but in this situation it will work same as padding space.

   .example-container { height: 300px; overflow: auto; margin:30px }

please look into image below for result of above code.

2. second way to fix this problem is make another div outside example-container and add padding to that while over example-container will wrap the table. see the stackblitz code here

Answer 3

I just figure out the solution based on @shashank sharma solution

But still its half on the way...!! Didnt got success

Below is the link

https://stackblitz.com/edit/angular-72dlr3-needdq

I just answered this as the next one who is answering dosent have to look through the entire conversation but will not approve this or edit this..!!

problem is

1. the same example is being provided everywhere but the scroll comes to the div containing the table but not the table itself

2. The sticky header and footers arent working quite well..!!

3. the content gets scrolled up over the header..!!