如何修复 mat-tab 的标题 [英] How to fix the header of mat-tab

问题描述

我有 5 个垫子标签，每个标签都有大量数据，因此滚动被添加到该窗口.有什么方法可以修复 mat-tab 的标题并让内容可以滚动.

我尝试放置位置:固定；和位置:粘在里面

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

但似乎并没有解决问题.我的html

<mat-tab-group class="demo-tab-group" (selectedIndexChange)="loadDynamicContent($event)"><mat-tab matTooltip="工具提示！"标签=个人信息"><table id="customers" *ngIf="customerData"><标题><h4>客户信息</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 id="customers" *ngIf="aadhaarAddress"><标题><h4>Aadhaar 地址</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 id="customers" *ngIf="presentAddress"><标题><h4>当前地址</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 id="customers" *ngIf="financialInfo"><标题><h4>财务健康信息</h4></caption><tr *ngFor="让金融信息的项目"><td class="key">{{item.key}}</td><td class="value">{{item.value}}</td></tr><br></mat-tab><mat-tab label="A局"><table id="customers" *ngIf="bureauAnalysisData"><标题><h4>局分析数据</h4></caption><tr *ngFor="let 项目的 BureauAnalysisData"><td class="key" width="50%">{{item.key}}</td><td class="value" width="50%">{{item.value}}</td></tr><table id="customers" *ngIf="bureauScoreReasons"><标题><h4>Bureau 评分原因</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 id="customers" *ngIf="bureauEMI"><标题><h4>CIBIL中的总EMI</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><br></mat-tab><mat-tab label="Bureau E"><table id="customers" *ngIf="en​​quiry1"><标题><h4>过去 30 天内的查询</h4></caption><tr><th class="hide"></th><th class="value hide">查询次数</th><th class="value hide">平均金额</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><br><table id="customers" *ngIf="en​​quiry2"><标题><h4>过去 31-90 天内的查询</h4></caption><tr><th class="hide"></th><th class="value hide">查询次数</th><th class="value hide">平均金额</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><br></mat-tab><mat-tab label="SMS"><table id="customers" *ngIf="smsData"><标题><h4>短信数据分析</h4></caption><tr *ngFor="让 smsData 的项目"><td class="key" width="50%">{{item.key}}</td><td class="value" width="50%">{{item.value}}</td></tr><table id="customers" *ngIf="salary"><div *ngIf="salary.lenght>0"><标题><h4>薪水</h4></caption><tr><th width="1%">S.No </th><th width="20%">SMS 日期 </th><th width="13%">发件人姓名</th><th width="66">原始消息 </th></tr><tr *ngFor="let 工资项;let i=index"><td>{{i+1}}</td><td>{{item.smsDate}}</td><td>{{item.senderName}}</td><td>{{item.originalMessage}}</td></tr>
<table id="customers" *ngIf="balance"><div *ngIf="balance.length>0"><标题><h4>不足、退回、退回、逾期</h4></caption><tr><th width="1%">S.No </th><th width="20%">SMS 日期 </th><th width="13%">发件人姓名</th><th width="66">原始消息 </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>

<table id="customers" *ngIf="nach"><div *ngIf="nach.length>0"><标题><h4>EMI、ECS&NACH/h4</caption><tr><th width="1%">S.No </th><th width="20%">SMS 日期 </th><th width="13%">发件人姓名</th><th width="66">原始消息 </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>

<table id="customers" *ngIf="bureau"><div *ngIf="bureau.length>0"><标题><h4>Bureau</h4></caption><tr><th width="1%">S.No </th><th width="20%">SMS 日期 </th><th width="13%">发件人姓名</th><th width="66">原始消息 </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>

<table id="customers" *ngIf="companySalary"><div *ngIf="companySalary.length>0"><标题><h4>公司薪资</h4></caption><tr><th width="1%">S.No </th><th width="20%">SMS 日期 </th><th width="13%">发件人姓名</th><th width="66">原始消息 </th></tr><tr *ngFor="let companySalary 的项目;let i=index"><td>{{i+1}}</td><td>{{item.smsDate}}</td><td>{{item.senderName}}</td><td>{{item.originalMessage}}</td></tr>

<table id="customers" *ngIf="loan"><div *ngIf="loan.length>0"><标题><h4>贷款</h4></caption><tr><th width="1%">S.No </th><th width="20%">SMS 日期 </th><th width="13%">发件人姓名</th><th width="66">原始消息 </th></tr><tr *ngFor="let item of贷款;let i=index"><td>{{i+1}}</td><td>{{item.smsDate}}</td><td>{{item.senderName}}</td><td>{{item.originalMessage}}</td></tr>