How to fix the header of mat-tab

Question

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.

I tried putting position:fixed; and position:sticky inside

::ng-deep .mat-tab-label {

}

But it do not seems to solve the problem. my html

<div class="container">

  <mat-tab-group class="demo-tab-group" (selectedIndexChange)="loadDynamicContent($event)">
    <mat-tab matTooltip="Tooltip!" label="Pers info">
      <table id="customers" *ngIf="customerData">
        <caption>
          <h4>Customer Information</h4>
        </caption>
        <tr *ngFor="let item of customerData">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="50%">{{item.value}}</td>
        </tr>
      </table>
      <table id="customers" *ngIf="aadhaarAddress">
        <caption>
          <h4>Aadhaar Address</h4>
        </caption>
        <tr *ngFor="let item of aadhaarAddress">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="50%">{{item.value}}</td>
        </tr>
      </table>
      <table id="customers" *ngIf="presentAddress">
        <caption>
          <h4>Present Address</h4>
        </caption>
        <tr *ngFor="let item of presentAddress">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="50%">{{item.value}}</td>
        </tr>
      </table>
      <table id="customers" *ngIf="financialInfo">
        <caption>
          <h4>Financial Health Information</h4>
        </caption>
        <tr *ngFor="let item of financialInfo">
          <td class="key">
            {{item.key}}
          </td>
          <td class="value">{{item.value}}</td>
        </tr>
      </table>
      <br>
    </mat-tab>
    <mat-tab label="Bureau A">
      <table id="customers" *ngIf="bureauAnalysisData">
        <caption>
          <h4>Bureau Analysis Data</h4>
        </caption>
        <tr *ngFor="let item of bureauAnalysisData">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="50%">{{item.value}}</td>
        </tr>
      </table>

<table id="customers" *ngIf="bureauScoreReasons">
  <caption>
    <h4>Bureau Score Reasons</h4>
  </caption>
<tr *ngFor="let item of bureauScoreReasons">

    <td class="key" width="50%">

      {{item.key}}
    </td>
    <td class="value" width="50%">{{item.value}}</td>

  </tr>
</table>

      <table id="customers" *ngIf="bureauEMI">
        <caption>
          <h4>Total EMI in CIBIL</h4>
        </caption>
        <tr *ngFor="let item of bureauEMI">
<td class="key" width="50%">

            {{item.key}}
          </td>
<td class="value" width="50%">{{item.value}}</td>

        </tr>
      </table>
      <br>
    </mat-tab>
    <mat-tab label="Bureau E">
      <table id="customers" *ngIf="enquiry1">
        <caption>
          <h4>Enquiries in last 30 days</h4>
        </caption>
        <tr>
          <th class="hide"></th>
          <th class="value hide">Number of enquiries</th>
          <th class="value hide">Average amount</th>
        </tr>
        <tr *ngFor="let item of enquiry1">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="25%">{{item.value}} </td>
          <td class="value" width="25%">{{item.value2}}</td>
        </tr>
      </table>
      <br>
      <table id="customers" *ngIf="enquiry2">
        <caption>
          <h4>Enquiries in last 31-90 days</h4>
        </caption>
        <tr>
          <th class="hide"></th>
          <th class="value hide">Number of enquiries</th>
          <th class="value hide">Average amount</th>
        </tr>
        <tr *ngFor="let item of enquiry2">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="25%">{{item.value}}</td>
          <td class="value" width="25%">{{item.value2}}</td>
        </tr>
      </table>
      <br>
    </mat-tab>
    <mat-tab label="SMS">
      <table id="customers" *ngIf="smsData">
        <caption>
          <h4>SMS Data Analysis</h4>
        </caption>
        <tr *ngFor="let item of smsData">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="50%">{{item.value}}</td>
        </tr>
      </table>
      <table id="customers" *ngIf="salary">
        <div *ngIf="salary.lenght>0">
          <caption>
            <h4>Salary</h4>
          </caption>
          <tr>
        <th width="1%">S.No </th>
        <th width="20%">SMS Date </th>
        <th width="13%">Sender Name </th>
        <th width="66">Original Message </th>
          </tr>
          <tr *ngFor="let item of salary;let i=index">
            <td>
              {{i+1}}
            </td>
            <td>{{item.smsDate}}</td>
            <td>{{item.senderName}}</td>
            <td>{{item.originalMessage}}</td>
          </tr>
        </div>
      </table>
      <table id="customers" *ngIf="balance">
        <div *ngIf="balance.length>0">
          <caption>
            <h4>Insufficient, bounce, return, overdue</h4>
          </caption>
          <tr>
        <th width="1%">S.No </th>
        <th width="20%">SMS Date </th>
        <th width="13%">Sender Name </th>
        <th width="66">Original Message </th>
          </tr>
          <tr *ngFor="let item of balance;let i=index">
            <td>
              {{i+1}}
            </td>
            <td>{{item.smsDate}}</td>
            <td>{{item.senderName}}</td>
            <td>{{item.originalMessage}}</td>
          </tr>
        </div>
      </table>
      <table id="customers" *ngIf="nach">
        <div *ngIf="nach.length>0">
          <caption>
            <h4>EMI, ECS & NACH</h4>
          </caption>
          <tr>
          <th width="1%">S.No </th>
          <th width="20%">SMS Date </th>
          <th width="13%">Sender Name </th>
          <th width="66">Original Message </th>
          </tr>
          <tr *ngFor="let item of nach;let i=index">
            <td>
              {{i+1}}
            </td>
            <td>{{item.smsDate}}</td>
            <td>{{item.senderName}}</td>
            <td>{{item.originalMessage}}</td>
          </tr>
        </div>
      </table>
      <table id="customers" *ngIf="bureau">
        <div *ngIf="bureau.length>0">
          <caption>
            <h4>Bureau</h4>
          </caption>
          <tr>
          <th width="1%">S.No </th>
          <th width="20%">SMS Date </th>
          <th width="13%">Sender Name </th>
          <th width="66">Original Message </th>
          </tr>
          <tr *ngFor="let item of bureau;let i=index">
            <td>
              {{i+1}}
            </td>
            <td>{{item.smsDate}}</td>
            <td>{{item.senderName}}</td>
            <td>{{item.originalMessage}}</td>
          </tr>
        </div>
      </table>
      <table id="customers" *ngIf="companySalary">
        <div *ngIf="companySalary.length>0">
          <caption>
            <h4>Company Salary</h4>
          </caption>
          <tr>
        <th width="1%">S.No </th>
        <th width="20%">SMS Date </th>
        <th width="13%">Sender Name </th>
        <th width="66">Original Message </th>
          </tr>
          <tr *ngFor="let item of companySalary;let i=index">
            <td>
              {{i+1}}
            </td>
            <td>{{item.smsDate}}</td>
            <td>{{item.senderName}}</td>
            <td>{{item.originalMessage}}</td>
          </tr>
        </div>
      </table>
      <table id="customers" *ngIf="loan">
        <div *ngIf="loan.length>0">
          <caption>
            <h4>Loan</h4>
          </caption>
          <tr>
        <th width="1%">S.No </th>
        <th width="20%">SMS Date </th>
        <th width="13%">Sender Name </th>
        <th width="66">Original Message </th>
          </tr>
          <tr *ngFor="let item of loan;let i=index">
            <td>{{i+1}}</td>
            <td>{{item.smsDate}}</td>
            <td>{{item.senderName}}</td>
            <td>{{item.originalMessage}}</td>
          </tr>
        </div>
      </table>
      <table id="customers" *ngIf="score">
        <div *ngIf="score.length>0">
          <caption>
            <h4>Score</h4>
          </caption>
          <tr>
        <th width="1%">S.No </th>
        <th width="20%">SMS Date </th>
        <th width="13%">Sender Name </th>
        <th width="66">Original Message </th>
          </tr>
          <tr *ngFor="let item of score;let i=index">
            <td>{{i+1}}</td>
            <td>{{item.smsDate}}</td>
            <td>{{item.senderName}}</td>
            <td>{{item.originalMessage}}</td>
          </tr>
        </div>
      </table>
      <table id="customers" *ngIf="allSMSData">
        <div *ngIf="allSMSData.length>0">
          <caption>
            <h4>All SMS</h4>
          </caption>
          <tr>
            <th width="1%">S.No </th>
            <th width="20%">SMS Date </th>
            <th width="13%">Sender Name </th>
            <th width="66">Original Message </th>
          </tr>
          <tr *ngFor="let item of allSMSData;let i=index">
            <td >{{i+1}}</td>
            <td >{{item.smsDate}}</td>
            <td>{{item.senderName}}</td>
            <td >{{item.originalMessage}}</td>
          </tr>
        </div>
      </table>
      <br>
    </mat-tab>
    <mat-tab label="Device">
      <table id="customers" *ngIf="deviceData">
        <caption>
          <h4>Device Data</h4>
        </caption>
        <tr *ngFor="let item of deviceData">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="50%">{{item.value}}</td>
        </tr>
      </table>
      <table id="customers" *ngIf="wifiConnectionInfo">
        <caption *ngIf="wifiConnectionInfo.length>0">
          <h4>Wi-Fi Connections Information</h4>
        </caption>
        <tr *ngIf="wifiConnectionInfo.length>0">
          <th style="padding-left: 75px ">Wi-Fi Name</th>
          <th style="padding-left: 75px; ">No. of times connected in the last 7 days</th>
        </tr>
        <tr *ngFor="let item of wifiConnectionInfo">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="50%">{{item.value}}</td>
        </tr>
      </table>
      <br>
      <table id="customers" *ngIf="accountInfo">
        <caption *ngIf="accountInfo.length>0">
          <h4>Account Information</h4>
        </caption>
        <tr>
          <th style="padding-left: 75px">Email</th>
          <th style="padding-left: 75px;">Vendor</th>
        </tr>
        <tr *ngFor="let item of accountInfo">
          <td class="key" width="50%">
            {{item.email}}
          </td>
          <td class="value" width="50%">{{item.vendor}}</td>
        </tr>
      </table>
      <br>
    </mat-tab>
    <mat-tab label="Json">
      <mat-card>
        <app-ngx-json-viewer [json]="bureauJSON"></app-ngx-json-viewer>
      </mat-card>
    </mat-tab>
  </mat-tab-group>
</div>

css

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

Answer 1

Solved it using position: fixed !important; inside

:host ::ng-deep .mat-tab-header {
}

But then the tab was not clickable so added z-index:100000; and then it starts working.

Answer 2

Solved it using

::ng-deep .mat-tab-body-wrapper {
           height: 75vh; //required height
}

Answer 3

mat-tab-group {
  height: 100%;
  overflow-y: auto;
}