title: Angular material make sticky header and footer
body: <p>I'm using angular6 with Angular material design templates. currently, my result is as follows,
  <a href="https://i.stack.imgur.com/UKmaD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UKmaD.png" alt="enter image description here"></a></p>
  
  <p>Currently, I have sticky header and footer but the scrolling dataset is not user-friendly. 
  <code>issue-data-html</code> is my HTML file,</p>
  
  <pre><code>&lt;div class="mainDiv"&gt;
    &lt;div class="mat-elevation-z8 issueDataCard"&gt;
      &lt;div style="position: relative; z-index: 1; " class="app-list-header" fxLayout="row" fxLayoutAlign="start baseline"
        fxLayoutGap="8px" fxLayoutGap.gt-xs="24px"&gt;
        &lt;div fxLayout="column" fxLayoutAlign="start baseline" fxLayoutGap="24px" fxFlex="grow" fxLayout.gt-xs="row"&gt;
          &lt;div class="app-list-name"&gt;
            &lt;h3&gt;
              Issue Statuses
            &lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="vl"&gt;&lt;/div&gt;
          &lt;!--Search--&gt;
          &lt;mat-form-field class="app-filter-input" floatPlaceholder="never" fxFlex&gt;
            &lt;mat-icon class="app-filter-input-icon" matPrefix&gt;search&lt;/mat-icon&gt;
            &lt;input matInput #filter placeholder="Search&amp;hellip;" (keyup)="applyFilter($event.target.value)"&gt;
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
  
        &lt;div fxFlex="none"&gt;
          &lt;button mat-mini-fab style="background-color: #281c7b;" *ngIf="showAddIssueDataIcon"
            (click)="addIssueData(null)" matTooltip="Add Issue Data"&gt;
            &lt;mat-icon&gt;add&lt;/mat-icon&gt;
          &lt;/button&gt;
        &lt;/div&gt;
  
        &lt;button class="app-column-filter" type="button" mat-icon-button [matMenuTriggerFor]="columnFilter"&gt;
          &lt;mat-icon style="font-size: 130%; color:#929292" matTooltip="Configure Table"&gt;settings&lt;/mat-icon&gt;
        &lt;/button&gt;
        &amp;nbsp;&amp;nbsp;
        &lt;mat-menu #columnFilter="matMenu" yPosition="below" xPosition="before"&gt;
          &lt;button class="checkbox-item mat-menu-item" *ngFor="let column of displayedColumns"
            (click)="toggleColumnVisibility(column, $event)"&gt;
            &lt;mat-checkbox [(ngModel)]="column.visible" (change)="columnFilterCheckboxClick($event)" class="checkbox"
              #checkbox (click)="$event.stopPropagation()"&gt;
              {{ column.name }}
            &lt;/mat-checkbox&gt;
          &lt;/button&gt;
        &lt;/mat-menu&gt;
        &lt;ng-content select=".actions"&gt;&lt;/ng-content&gt;
      &lt;/div&gt;
  
      &lt;!--table--&gt;
      &lt;table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8"&gt;
        &lt;!-- issueStatus Column --&gt;
        &lt;ng-container matColumnDef="issueStatus"&gt;
          &lt;th mat-sort-header="name" mat-header-cell *matHeaderCellDef&gt;ISSUE STATUS&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt;
            {{element.name}}
          &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- showInBacklog Column --&gt;
        &lt;ng-container matColumnDef="showInBacklog"&gt;
          &lt;th mat-sort-header="backlog" mat-header-cell *matHeaderCellDef&gt;SHOW IN BACKLOG&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element" style="text-transform: uppercase"&gt;
            {{element.backlog}}
          &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Status Column --&gt;
        &lt;ng-container matColumnDef="status"&gt;
          &lt;th mat-sort-header="status" mat-header-cell *matHeaderCellDef&gt;STATUS&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element" style="text-transform: uppercase"&gt;
            {{element.status}}
          &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Actions Column --&gt;
        &lt;ng-container matColumnDef="action"&gt;
          &lt;th mat-header-cell *matHeaderCellDef class="action-cell" style="padding-right: 40px"&gt;ACTIONS&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element; let i = index" class="action-cell"&gt;
            &lt;button mat-icon-button *ngIf="showAddIssueDataIcon" (click)="editIssueData(element)"&gt;
              &lt;mat-icon class="iconStyle" matTooltip="Edit Issue Data"&gt;edit&lt;/mat-icon&gt;
            &lt;/button&gt;
            &amp;nbsp;&amp;nbsp;
            &lt;!--&amp;nbsp;&amp;nbsp;--&gt;
            &lt;a style="cursor: pointer" *ngIf="showEditIssue"&gt;
              &lt;i class="material-icons" style="color:#757575" [matMenuTriggerFor]="selectMenu"
                matTooltip="More actions"&gt;more_vert&lt;/i&gt;&lt;/a&gt;
            &lt;mat-menu #selectMenu="matMenu"&gt;
              &lt;button mat-menu-item *ngIf="element.status === 'INACTIVE'"
                (click)="onClickEditStatus(element , true,i)"&gt;Make Active&lt;/button&gt;
              &lt;button mat-menu-item *ngIf="element.status === 'ACTIVE'"
                (click)="onClickEditStatus(element , false,i)"&gt;Make Inactive&lt;/button&gt;
              &lt;button mat-menu-item (click)="deleteIssueData(element,i)"&gt;Delete&lt;/button&gt;
            &lt;/mat-menu&gt;
          &lt;/td&gt;
        &lt;/ng-container&gt;
  
  
        &lt;tr mat-header-row *matHeaderRowDef="visibleColumns"&gt;&lt;/tr&gt;
        &lt;tr mat-row *matRowDef="let row; columns: visibleColumns;"
          [ngClass]="{ hovered: row.hovered, highlighted: row.highlighted }" (click)="row.highlighted = !row.highlighted"
          (mouseover)="row.hovered = true" (mouseout)="row.hovered = false"&gt;&lt;/tr&gt;
      &lt;/table&gt;
      &lt;mat-paginator [pageSize]="savedPageSize" (page)="columnFilterCheckboxClick($event)"
        [pageSizeOptions]="[5, 10, 20, 100]" showFirstLastButtons&gt;&lt;/mat-paginator&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>My css file is as follows,</p>
  
  <pre><code>   .issueDataCard{
      margin: 20px;
    }
    /* Structure */
    table {
      width: 100%;
    }
    .mat-sort-header-container {
      align-items: center;
    }
    .mat-form-field {
      font-size: 14px;
      width: 98%;
      margin: 10px;
    }
    @import "var";
  
    .app-list-name {
      color: $color;
      border-right: 1px solid $theme-divider;
      font-size: 20px;
      line-height: 0px;
      font-weight: 500;
      padding-right: $spacing;
      padding-left: $spacing;
      @include media-xs {
        border-right: none;
      }
    }
  
    .iconStyle{
      color:#281c7b;
      cursor: pointer;
    }
    .slideToggleStyle{
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
    .divMarginStyle{
      margin-bottom: 20px;
      margin-right: 20px;
    }
  
  
    .dataStyle{
      text-align: center;
    }
    .dateStyle{
      color:#5D6C7F;
      font-size: 10px;
    }
    .actions{
      padding-right: 30px;
    }
  
    .action-cell{
      text-align: right;
    }
  
    .mat-cell{
      align-items: center;
    }
  
    .mat-elevation-z8 {
      display: flex;
      flex-direction: column;
      max-height: 500px;
      width: 100%;
      margin-bottom: 1.5%;
      overflow: auto;
    }
  </code></pre>
  
  <p>I have no idea how to change these CSS classes according to my need, Any help will be greatly accepted.</p>