title: How to fix the header of mat-tab
body: <p>I am having 5 mat-tab and each tab is having a large amount of data so scroll is getting added to that window. Is there any way through which I can fix the header of mat-tab and let the content to be scroll able.</p>
  
  <p>I tried putting position:fixed; and position:sticky inside </p>
  
  <pre><code>::ng-deep .mat-tab-label {
  
  }
  </code></pre>
  
  <p>But it do not seems to solve the problem.
  my html</p>
  
  <pre><code>&lt;div class="container"&gt;
  
    &lt;mat-tab-group class="demo-tab-group" (selectedIndexChange)="loadDynamicContent($event)"&gt;
      &lt;mat-tab matTooltip="Tooltip!" label="Pers info"&gt;
        &lt;table id="customers" *ngIf="customerData"&gt;
          &lt;caption&gt;
            &lt;h4&gt;Customer Information&lt;/h4&gt;
          &lt;/caption&gt;
          &lt;tr *ngFor="let item of customerData"&gt;
            &lt;td class="key" width="50%"&gt;
              {{item.key}}
            &lt;/td&gt;
            &lt;td class="value" width="50%"&gt;{{item.value}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
        &lt;table id="customers" *ngIf="aadhaarAddress"&gt;
          &lt;caption&gt;
            &lt;h4&gt;Aadhaar Address&lt;/h4&gt;
          &lt;/caption&gt;
          &lt;tr *ngFor="let item of aadhaarAddress"&gt;
            &lt;td class="key" width="50%"&gt;
              {{item.key}}
            &lt;/td&gt;
            &lt;td class="value" width="50%"&gt;{{item.value}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
        &lt;table id="customers" *ngIf="presentAddress"&gt;
          &lt;caption&gt;
            &lt;h4&gt;Present Address&lt;/h4&gt;
          &lt;/caption&gt;
          &lt;tr *ngFor="let item of presentAddress"&gt;
            &lt;td class="key" width="50%"&gt;
              {{item.key}}
            &lt;/td&gt;
            &lt;td class="value" width="50%"&gt;{{item.value}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
        &lt;table id="customers" *ngIf="financialInfo"&gt;
          &lt;caption&gt;
            &lt;h4&gt;Financial Health Information&lt;/h4&gt;
          &lt;/caption&gt;
          &lt;tr *ngFor="let item of financialInfo"&gt;
            &lt;td class="key"&gt;
              {{item.key}}
            &lt;/td&gt;
            &lt;td class="value"&gt;{{item.value}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
        &lt;br&gt;
      &lt;/mat-tab&gt;
      &lt;mat-tab label="Bureau A"&gt;
        &lt;table id="customers" *ngIf="bureauAnalysisData"&gt;
          &lt;caption&gt;
            &lt;h4&gt;Bureau Analysis Data&lt;/h4&gt;
          &lt;/caption&gt;
          &lt;tr *ngFor="let item of bureauAnalysisData"&gt;
            &lt;td class="key" width="50%"&gt;
              {{item.key}}
            &lt;/td&gt;
            &lt;td class="value" width="50%"&gt;{{item.value}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
  
  &lt;table id="customers" *ngIf="bureauScoreReasons"&gt;
    &lt;caption&gt;
      &lt;h4&gt;Bureau Score Reasons&lt;/h4&gt;
    &lt;/caption&gt;
  &lt;tr *ngFor="let item of bureauScoreReasons"&gt;
  
      &lt;td class="key" width="50%"&gt;
  
        {{item.key}}
      &lt;/td&gt;
      &lt;td class="value" width="50%"&gt;{{item.value}}&lt;/td&gt;
  
    &lt;/tr&gt;
  &lt;/table&gt;
  
        &lt;table id="customers" *ngIf="bureauEMI"&gt;
          &lt;caption&gt;
            &lt;h4&gt;Total EMI in CIBIL&lt;/h4&gt;
          &lt;/caption&gt;
          &lt;tr *ngFor="let item of bureauEMI"&gt;
  &lt;td class="key" width="50%"&gt;
  
              {{item.key}}
            &lt;/td&gt;
  &lt;td class="value" width="50%"&gt;{{item.value}}&lt;/td&gt;
  
          &lt;/tr&gt;
        &lt;/table&gt;
        &lt;br&gt;
      &lt;/mat-tab&gt;
      &lt;mat-tab label="Bureau E"&gt;
        &lt;table id="customers" *ngIf="enquiry1"&gt;
          &lt;caption&gt;
            &lt;h4&gt;Enquiries in last 30 days&lt;/h4&gt;
          &lt;/caption&gt;
          &lt;tr&gt;
            &lt;th class="hide"&gt;&lt;/th&gt;
            &lt;th class="value hide"&gt;Number of enquiries&lt;/th&gt;
            &lt;th class="value hide"&gt;Average amount&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr *ngFor="let item of enquiry1"&gt;
            &lt;td class="key" width="50%"&gt;
              {{item.key}}
            &lt;/td&gt;
            &lt;td class="value" width="25%"&gt;{{item.value}} &lt;/td&gt;
            &lt;td class="value" width="25%"&gt;{{item.value2}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
        &lt;br&gt;
        &lt;table id="customers" *ngIf="enquiry2"&gt;
          &lt;caption&gt;
            &lt;h4&gt;Enquiries in last 31-90 days&lt;/h4&gt;
          &lt;/caption&gt;
          &lt;tr&gt;
            &lt;th class="hide"&gt;&lt;/th&gt;
            &lt;th class="value hide"&gt;Number of enquiries&lt;/th&gt;
            &lt;th class="value hide"&gt;Average amount&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr *ngFor="let item of enquiry2"&gt;
            &lt;td class="key" width="50%"&gt;
              {{item.key}}
            &lt;/td&gt;
            &lt;td class="value" width="25%"&gt;{{item.value}}&lt;/td&gt;
            &lt;td class="value" width="25%"&gt;{{item.value2}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
        &lt;br&gt;
      &lt;/mat-tab&gt;
      &lt;mat-tab label="SMS"&gt;
        &lt;table id="customers" *ngIf="smsData"&gt;
          &lt;caption&gt;
            &lt;h4&gt;SMS Data Analysis&lt;/h4&gt;
          &lt;/caption&gt;
          &lt;tr *ngFor="let item of smsData"&gt;
            &lt;td class="key" width="50%"&gt;
              {{item.key}}
            &lt;/td&gt;
            &lt;td class="value" width="50%"&gt;{{item.value}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
        &lt;table id="customers" *ngIf="salary"&gt;
          &lt;div *ngIf="salary.lenght&gt;0"&gt;
            &lt;caption&gt;
              &lt;h4&gt;Salary&lt;/h4&gt;
            &lt;/caption&gt;
            &lt;tr&gt;
          &lt;th width="1%"&gt;S.No &lt;/th&gt;
          &lt;th width="20%"&gt;SMS Date &lt;/th&gt;
          &lt;th width="13%"&gt;Sender Name &lt;/th&gt;
          &lt;th width="66"&gt;Original Message &lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr *ngFor="let item of salary;let i=index"&gt;
              &lt;td&gt;
                {{i+1}}
              &lt;/td&gt;
              &lt;td&gt;{{item.smsDate}}&lt;/td&gt;
              &lt;td&gt;{{item.senderName}}&lt;/td&gt;
              &lt;td&gt;{{item.originalMessage}}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/div&gt;
        &lt;/table&gt;
        &lt;table id="customers" *ngIf="balance"&gt;
          &lt;div *ngIf="balance.length&gt;0"&gt;
            &lt;caption&gt;
              &lt;h4&gt;Insufficient, bounce, return, overdue&lt;/h4&gt;
            &lt;/caption&gt;
            &lt;tr&gt;
          &lt;th width="1%"&gt;S.No &lt;/th&gt;
          &lt;th width="20%"&gt;SMS Date &lt;/th&gt;
          &lt;th width="13%"&gt;Sender Name &lt;/th&gt;
          &lt;th width="66"&gt;Original Message &lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr *ngFor="let item of balance;let i=index"&gt;
              &lt;td&gt;
                {{i+1}}
              &lt;/td&gt;
              &lt;td&gt;{{item.smsDate}}&lt;/td&gt;
              &lt;td&gt;{{item.senderName}}&lt;/td&gt;
              &lt;td&gt;{{item.originalMessage}}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/div&gt;
        &lt;/table&gt;
        &lt;table id="customers" *ngIf="nach"&gt;
          &lt;div *ngIf="nach.length&gt;0"&gt;
            &lt;caption&gt;
              &lt;h4&gt;EMI, ECS &amp; NACH&lt;/h4&gt;
            &lt;/caption&gt;
            &lt;tr&gt;
            &lt;th width="1%"&gt;S.No &lt;/th&gt;
            &lt;th width="20%"&gt;SMS Date &lt;/th&gt;
            &lt;th width="13%"&gt;Sender Name &lt;/th&gt;
            &lt;th width="66"&gt;Original Message &lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr *ngFor="let item of nach;let i=index"&gt;
              &lt;td&gt;
                {{i+1}}
              &lt;/td&gt;
              &lt;td&gt;{{item.smsDate}}&lt;/td&gt;
              &lt;td&gt;{{item.senderName}}&lt;/td&gt;
              &lt;td&gt;{{item.originalMessage}}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/div&gt;
        &lt;/table&gt;
        &lt;table id="customers" *ngIf="bureau"&gt;
          &lt;div *ngIf="bureau.length&gt;0"&gt;
            &lt;caption&gt;
              &lt;h4&gt;Bureau&lt;/h4&gt;
            &lt;/caption&gt;
            &lt;tr&gt;
            &lt;th width="1%"&gt;S.No &lt;/th&gt;
            &lt;th width="20%"&gt;SMS Date &lt;/th&gt;
            &lt;th width="13%"&gt;Sender Name &lt;/th&gt;
            &lt;th width="66"&gt;Original Message &lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr *ngFor="let item of bureau;let i=index"&gt;
              &lt;td&gt;
                {{i+1}}
              &lt;/td&gt;
              &lt;td&gt;{{item.smsDate}}&lt;/td&gt;
              &lt;td&gt;{{item.senderName}}&lt;/td&gt;
              &lt;td&gt;{{item.originalMessage}}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/div&gt;
        &lt;/table&gt;
        &lt;table id="customers" *ngIf="companySalary"&gt;
          &lt;div *ngIf="companySalary.length&gt;0"&gt;
            &lt;caption&gt;
              &lt;h4&gt;Company Salary&lt;/h4&gt;
            &lt;/caption&gt;
            &lt;tr&gt;
          &lt;th width="1%"&gt;S.No &lt;/th&gt;
          &lt;th width="20%"&gt;SMS Date &lt;/th&gt;
          &lt;th width="13%"&gt;Sender Name &lt;/th&gt;
          &lt;th width="66"&gt;Original Message &lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr *ngFor="let item of companySalary;let i=index"&gt;
              &lt;td&gt;
                {{i+1}}
              &lt;/td&gt;
              &lt;td&gt;{{item.smsDate}}&lt;/td&gt;
              &lt;td&gt;{{item.senderName}}&lt;/td&gt;
              &lt;td&gt;{{item.originalMessage}}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/div&gt;
        &lt;/table&gt;
        &lt;table id="customers" *ngIf="loan"&gt;
          &lt;div *ngIf="loan.length&gt;0"&gt;
            &lt;caption&gt;
              &lt;h4&gt;Loan&lt;/h4&gt;
            &lt;/caption&gt;
            &lt;tr&gt;
          &lt;th width="1%"&gt;S.No &lt;/th&gt;
          &lt;th width="20%"&gt;SMS Date &lt;/th&gt;
          &lt;th width="13%"&gt;Sender Name &lt;/th&gt;
          &lt;th width="66"&gt;Original Message &lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr *ngFor="let item of loan;let i=index"&gt;
              &lt;td&gt;{{i+1}}&lt;/td&gt;
              &lt;td&gt;{{item.smsDate}}&lt;/td&gt;
              &lt;td&gt;{{item.senderName}}&lt;/td&gt;
              &lt;td&gt;{{item.originalMessage}}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/div&gt;
        &lt;/table&gt;
        &lt;table id="customers" *ngIf="score"&gt;
          &lt;div *ngIf="score.length&gt;0"&gt;
            &lt;caption&gt;
              &lt;h4&gt;Score&lt;/h4&gt;
            &lt;/caption&gt;
            &lt;tr&gt;
          &lt;th width="1%"&gt;S.No &lt;/th&gt;
          &lt;th width="20%"&gt;SMS Date &lt;/th&gt;
          &lt;th width="13%"&gt;Sender Name &lt;/th&gt;
          &lt;th width="66"&gt;Original Message &lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr *ngFor="let item of score;let i=index"&gt;
              &lt;td&gt;{{i+1}}&lt;/td&gt;
              &lt;td&gt;{{item.smsDate}}&lt;/td&gt;
              &lt;td&gt;{{item.senderName}}&lt;/td&gt;
              &lt;td&gt;{{item.originalMessage}}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/div&gt;
        &lt;/table&gt;
        &lt;table id="customers" *ngIf="allSMSData"&gt;
          &lt;div *ngIf="allSMSData.length&gt;0"&gt;
            &lt;caption&gt;
              &lt;h4&gt;All SMS&lt;/h4&gt;
            &lt;/caption&gt;
            &lt;tr&gt;
              &lt;th width="1%"&gt;S.No &lt;/th&gt;
              &lt;th width="20%"&gt;SMS Date &lt;/th&gt;
              &lt;th width="13%"&gt;Sender Name &lt;/th&gt;
              &lt;th width="66"&gt;Original Message &lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr *ngFor="let item of allSMSData;let i=index"&gt;
              &lt;td &gt;{{i+1}}&lt;/td&gt;
              &lt;td &gt;{{item.smsDate}}&lt;/td&gt;
              &lt;td&gt;{{item.senderName}}&lt;/td&gt;
              &lt;td &gt;{{item.originalMessage}}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/div&gt;
        &lt;/table&gt;
        &lt;br&gt;
      &lt;/mat-tab&gt;
      &lt;mat-tab label="Device"&gt;
        &lt;table id="customers" *ngIf="deviceData"&gt;
          &lt;caption&gt;
            &lt;h4&gt;Device Data&lt;/h4&gt;
          &lt;/caption&gt;
          &lt;tr *ngFor="let item of deviceData"&gt;
            &lt;td class="key" width="50%"&gt;
              {{item.key}}
            &lt;/td&gt;
            &lt;td class="value" width="50%"&gt;{{item.value}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
        &lt;table id="customers" *ngIf="wifiConnectionInfo"&gt;
          &lt;caption *ngIf="wifiConnectionInfo.length&gt;0"&gt;
            &lt;h4&gt;Wi-Fi Connections Information&lt;/h4&gt;
          &lt;/caption&gt;
          &lt;tr *ngIf="wifiConnectionInfo.length&gt;0"&gt;
            &lt;th style="padding-left: 75px "&gt;Wi-Fi Name&lt;/th&gt;
            &lt;th style="padding-left: 75px; "&gt;No. of times connected in the last 7 days&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr *ngFor="let item of wifiConnectionInfo"&gt;
            &lt;td class="key" width="50%"&gt;
              {{item.key}}
            &lt;/td&gt;
            &lt;td class="value" width="50%"&gt;{{item.value}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
        &lt;br&gt;
        &lt;table id="customers" *ngIf="accountInfo"&gt;
          &lt;caption *ngIf="accountInfo.length&gt;0"&gt;
            &lt;h4&gt;Account Information&lt;/h4&gt;
          &lt;/caption&gt;
          &lt;tr&gt;
            &lt;th style="padding-left: 75px"&gt;Email&lt;/th&gt;
            &lt;th style="padding-left: 75px;"&gt;Vendor&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr *ngFor="let item of accountInfo"&gt;
            &lt;td class="key" width="50%"&gt;
              {{item.email}}
            &lt;/td&gt;
            &lt;td class="value" width="50%"&gt;{{item.vendor}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
        &lt;br&gt;
      &lt;/mat-tab&gt;
      &lt;mat-tab label="Json"&gt;
        &lt;mat-card&gt;
          &lt;app-ngx-json-viewer [json]="bureauJSON"&gt;&lt;/app-ngx-json-viewer&gt;
        &lt;/mat-card&gt;
      &lt;/mat-tab&gt;
    &lt;/mat-tab-group&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>mat-grid-tile {
    background: lightgrey;
  }
  
  
  
  h4 {
    color: grey;
    text-align: center;
  }
  
  .key {
    padding-left: 75px !important;
    font-weight: bold;
    color: gray;
  }
  
  .not-available {
    margin-top: 15%;
   text-align: center;
    font-size: 14px;
  }
  
  .mat-tab-body-content {
    height: 100%;
  }
  
  
  .value {
    padding-left: 75px !important;
    color: gray;
  }
  
  ::ng-deep .mat-tab-labels {
     justify-content: center;
     padding: 0px 7px !important;
     font-size: 10px !important;
  }
  
  ::ng-deep .mat-tab-label {
    justify-content: center;
    padding: 0px 7px !important;
    font-size: 12px !important;
    min-width: 85px !important;
  
  }
  
  
  
  
  .hide {
    border: none !important;
  }
  
  #customers {
    padding:0;
    margin:0;
    font-family: 'Roboto', 'Helvetica Neue', sans-serif;
    font-size: 12px;
    font-weight: 500;
    width: 100%;
    border-collapse: collapse;
  
  }
  
  td {
    color: #808080;
  }
  
  .container {
    overflow-y: auto;
  
  }
  
  #customers td,
  #customers th {
    border: 1px solid #ddd;
    padding: 2px;
  }
  
  #customers tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  
  #customers th {
    color: gray;
    text-align: left;
    border-collapse: collapse;
  }
  </code></pre>