横向滚动时垫台的背景色 [英] Mat-table background color on horizontal scroll
本文介绍了横向滚动时垫台的背景色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的angular 6应用程序中使用 mat-table ，我无法为 mat-header-row 和 mat-row 在水平滚动条上正确显示.CSS属性仅适用于屏幕的可见部分，一旦向右滚动，就不会分配颜色.
Using mat-table in my angular 6 application, I am not able to set background color for mat-header-row and mat-row properly on horizontal scroll. CSS property is applied only to visible portion of screen, once scrolled to right, color is not assigned.
我的桌子上大约有30列，因此肯定需要水平滚动.
I have around 30 columns in my table, so need horizontal scroll for sure.
我的CSS如下:
.mat-toolbar {
font-size: 17px;
font-family: inherit;
background-color: indigo;
max-height: 12vh;
}
.mat-elevation-z8 {
padding: 0px;
}
.mat-table {
overflow: auto;
max-height: 68vh;
min-width: 100%;
}
.mat-header-row {
position: sticky;
top: -.5px;
z-index: 100;
background-color: gainsboro;
font-size: 12px;
min-height: 8vh;
color: #f5f5f5;
padding-top: 3px;
}
.mat-row:nth-child(even) {
background-color: floralwhite;
}
.mat-row:nth-child(odd) {
background-color: gainsboro;
}
.mat-row {
min-height: 8vh;
}
.no-results {
display: flex;
justify-content: center;
padding: 12px;
font-size: 12px;
font-style: italic;
font-family: inherit;
}
.mat-cell {
font-family: inherit;
font-size: 12px;
}
.mat-header-cell {
font-size: 12px;
font-weight: bolder;
}
.mat-cell:nth-child(1),
.mat-header-cell:nth-child(1) {
flex: 0 0 6%;
}
.mat-cell:nth-child(2),
.mat-header-cell:nth-child(2) {
flex: 0 0 9%;
}
.mat-cell:nth-child(3),
.mat-header-cell:nth-child(3) {
flex: 0 0 14%;
}
.mat-cell:nth-child(4),
.mat-header-cell:nth-child(4) {
flex: 0 0 10%;
}
.mat-cell:nth-child(5),
.mat-header-cell:nth-child(5) {
flex: 0 0 10%;
}
.mat-cell:nth-child(6),
.mat-header-cell:nth-child(6) {
flex: 0 0 8%;
}
.mat-cell:nth-child(7),
.mat-header-cell:nth-child(7) {
flex: 0 0 9%;
}
.mat-cell:nth-child(8),
.mat-header-cell:nth-child(8) {
flex: 0 0 8%;
}
.mat-cell:nth-child(9),
.mat-header-cell:nth-child(9) {
flex: 0 0 8%;
}
.mat-cell:nth-child(10),
.mat-header-cell:nth-child(10) {
flex: 0 0 9%;
}
.mat-cell:nth-child(11),
.mat-header-cell:nth-child(11) {
flex: 0 0 8%;
}
.mat-cell:nth-child(12),
.mat-header-cell:nth-child(12) {
flex: 0 0 11%;
}
.mat-cell:nth-child(13),
.mat-header-cell:nth-child(13) {
flex: 0 0 7%;
}
.mat-cell:nth-child(14),
.mat-header-cell:nth-child(14) {
flex: 0 0 11%;
}
.mat-cell:nth-child(15),
.mat-header-cell:nth-child(15) {
flex: 0 0 7%;
}
.mat-cell:nth-child(16),
.mat-header-cell:nth-child(16) {
flex: 0 0 8%;
}
.mat-column-name {
border-right: 1px solid grey;
align-self: stretch;
text-align: center;
}
.mat-column-position {
border-right: 1px solid grey;
align-self: stretch;
text-align: center;
}
.mat-column-weight {
border-right: 1px solid grey;
align-self: stretch;
text-align: center;
}
.mat-column-symbol {
text-align: center;
align-self: stretch;
}
.mat-column-weight {
align-self: stretch;
}
尝试将溢出属性分别设置为mat-header-row和mat-row；它可以解决背景色，但是可以在不同步的情况下分别滚动标题行和数据行.
Tried setting overflow property separately to mat-header-row and mat-row; it resolves background color but then header-row and data-rows can be scrolled separately without sync.
HTML文件如下:
<div [@routerTransition] class="col-md-12 mat-elevation-z8" class="white-space-pre-line">
<mat-toolbar color="primary">
Project Times Overview Report
<span class="spacer"></span>
<mat-select *ngxPermissionsOnly="['attendance-all-leave-balance-read']" name="year" [(ngModel)]="selectedYear"
class="form-control" type="text" placeholder="Year" required>
<mat-option *ngFor="let year of yearName" [value]="year">{{year}}</mat-option>
</mat-select>
<button class="btn btn-sm btn-primary" *ngxPermissionsOnly="['attendance-all-leave-balance-read']" [disabled]="selectedYear==''"
(click)="loadData()">View Report</button>
</mat-toolbar>
<div class="form">
<mat-form-field floatPlaceholder="never" color="primary">
<input matInput #filter placeholder="Filter">
</mat-form-field>
</div>
<mat-table #table [dataSource]="dataSource" matSort class="mat-cell">
<ng-container matColumnDef="sno">
<mat-header-cell *matHeaderCellDef>S.No.</mat-header-cell>
<mat-cell *matCellDef="let timesReport; let i = index;">{{i+1}}</mat-cell>
</ng-container>
<ng-container matColumnDef="timesCode">
<mat-header-cell *matHeaderCellDef>Times Code</mat-header-cell>
<mat-cell *matCellDef="let timesReport">{{timesReport.timesCode}}</mat-cell>
</ng-container>
<ng-container matColumnDef="projectName">
<mat-header-cell *matHeaderCellDef>Project</mat-header-cell>
<mat-cell *matCellDef="let timesReport">{{timesReport.projectName}}</mat-cell>
</ng-container>
<ng-container matColumnDef="team">
<mat-header-cell *matHeaderCellDef mat-sort-header>Team</mat-header-cell>
<mat-cell *matCellDef="let timesReport">{{getTeamDesc(timesReport)}}</mat-cell>
</ng-container>
<ng-container matColumnDef="department">
<mat-header-cell *matHeaderCellDef mat-sort-header>Department</mat-header-cell>
<mat-cell *matCellDef="let timesReport">{{getDeptDesc(timesReport)}}</mat-cell>
</ng-container>
<ng-container matColumnDef="allocatedWorkload">
<mat-header-cell *matHeaderCellDef mat-sort-header>Allocated PD</mat-header-cell>
<mat-cell *matCellDef="let timesReport">{{timesReport.allocatedWorkload}}</mat-cell>
</ng-container>
<ng-container matColumnDef="activity">
<mat-header-cell *matHeaderCellDef>Activity</mat-header-cell>
<mat-cell *matCellDef="let timesReport">{{timesReport.activity}}</mat-cell>
</ng-container>
<ng-container matColumnDef="actualWorkload">
<mat-header-cell *matHeaderCellDef mat-sort-header>Actual Received PD</mat-header-cell>
<mat-cell *matCellDef="let timesReport">{{timesReport.actualWorkload}}</mat-cell>
</ng-container>
<ng-container matColumnDef="createdBy">
<mat-header-cell *matHeaderCellDef mat-sort-header>Created By</mat-header-cell>
<mat-cell *matCellDef="let timesReport">{{timesReport.createdBy}}</mat-cell>
</ng-container>
<ng-container matColumnDef="creationDate">
<mat-header-cell *matHeaderCellDef mat-sort-header>Creation Date</mat-header-cell>
<mat-cell *matCellDef="let timesReport">{{timesReport.creationDate}}</mat-cell>
</ng-container>
<ng-container matColumnDef="approvedBy">
<mat-header-cell *matHeaderCellDef mat-sort-header>Approved By</mat-header-cell>
<mat-cell *matCellDef="let timesReport">{{timesReport.approvedBy}}</mat-cell>
</ng-container>
<ng-container matColumnDef="approvalDate">
<mat-header-cell *matHeaderCellDef mat-sort-header>Approval Date</mat-header-cell>
<mat-cell *matCellDef="let timesReport">{{timesReport.approvalDate}}</mat-cell>
</ng-container>
<ng-container matColumnDef="claimed">
<mat-header-cell *matHeaderCellDef mat-sort-header>Claimed PD</mat-header-cell>
<mat-cell *matCellDef="let timesReport">{{timesReport.claimed}}</mat-cell>
</ng-container>
<ng-container matColumnDef="unclaimed">
<mat-header-cell *matHeaderCellDef mat-sort-header>Unclaimed PD</mat-header-cell>
<mat-cell *matCellDef="let timesReport">{{timesReport.unclaimed}}</mat-cell>
</ng-container>
<ng-container matColumnDef="gapActualAllocated">
<mat-header-cell *matHeaderCellDef mat-sort-header>Gap (Actual vs Allocated)</mat-header-cell>
<mat-cell *matCellDef="let timesReport">{{timesReport.gapActualAllocated}}</mat-cell>
</ng-container>
<ng-container matColumnDef="lossPD">
<mat-header-cell *matHeaderCellDef mat-sort-header>Loss PD</mat-header-cell>
<mat-cell *matCellDef="let timesReport">{{timesReport.lossPD}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="dispProjectTimesReportColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: dispProjectTimesReportColumns;"></mat-row>
</mat-table>
<div class="no-results" [style.display]="dataSource.renderedData.length == 0 ? '' : 'none'">
No results found
</div>
<mat-paginator #paginator [length]="dataSource.filteredData.length" [pageIndex]="0" [pageSize]="100"
[pageSizeOptions]="[25, 50, 100, 200]">
</mat-paginator>
</div>
遵循Deepu的回答后，背景如下所示:
推荐答案
使用此
.mat-header-row{
width: fit-content !important;
}
.mat-row{
width: fit-content !important;
}
这篇关于横向滚动时垫台的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
