水平滚动上的垫表背景颜色 [英] Mat-table background color on horizontal scroll

问题描述

在我的 angular 6 应用程序中使用 mat-table，我无法为 mat-h​​eader-row 和 mat-row正确地水平滚动.CSS 属性仅应用于屏幕的可见部分，一旦向右滚动，就不会分配颜色.

我的表中有大约 30 列，因此肯定需要水平滚动.

我的CSS如下:

.mat-toolbar {字体大小:17px；字体系列:继承；背景颜色:靛蓝；最大高度:12vh；}.mat-海拔-z8 {填充:0px；}.mat-table {溢出:自动；最大高度:68vh；最小宽度:100%；}.mat-h​​eader-row {位置:粘性；顶部:-.5px；z-索引:100；背景颜色:格斯伯勒；字体大小:12px；最小高度:8vh；颜色:#f5f5f5；填充顶部:3px；}.mat-row:nth-child(even) {背景色:花白；}.mat-row:nth-child(odd) {背景颜色:格斯伯勒；}.mat-row {最小高度:8vh；}.没有结果 {显示:弹性；对齐内容:居中；填充:12px；字体大小:12px；字体样式:斜体；字体系列:继承；}.mat-cell {字体系列:继承；字体大小:12px；}.mat-h​​eader-cell {字体大小:12px；字体粗细:更粗；}.mat-cell:nth-child(1),.mat-h​​eader-cell:nth-child(1) {弹性:0 0 6%；}.mat-cell:nth-child(2),.mat-h​​eader-cell:nth-child(2) {弹性:0 0 9%；}.mat-cell:nth-child(3),.mat-h​​eader-cell:nth-child(3) {弹性:0 0 14%；}.mat-cell:nth-child(4),.mat-h​​eader-cell:nth-child(4) {弹性:0 0 10%；}.mat-cell:nth-child(5),.mat-h​​eader-cell:nth-child(5) {弹性:0 0 10%；}.mat-cell:nth-child(6),.mat-h​​eader-cell:nth-child(6) {弹性:0 0 8%；}.mat-cell:nth-child(7),.mat-h​​eader-cell:nth-child(7) {弹性:0 0 9%；}.mat-cell:nth-child(8),.mat-h​​eader-cell:nth-child(8) {弹性:0 0 8%；}.mat-cell:nth-child(9),.mat-h​​eader-cell:nth-child(9) {弹性:0 0 8%；}.mat-cell:nth-child(10),.mat-h​​eader-cell:nth-child(10) {弹性:0 0 9%；}.mat-cell:nth-child(11),.mat-h​​eader-cell:nth-child(11) {弹性:0 0 8%；}.mat-cell:nth-child(12),.mat-h​​eader-cell:nth-child(12) {弹性:0 0 11%；}.mat-cell:nth-child(13),.mat-h​​eader-cell:nth-child(13) {弹性:0 0 7%；}.mat-cell:nth-child(14),.mat-h​​eader-cell:nth-child(14) {弹性:0 0 11%；}.mat-cell:nth-child(15),.mat-h​​eader-cell:nth-child(15) {弹性:0 0 7%；}.mat-cell:nth-child(16),.mat-h​​eader-cell:nth-child(16) {弹性:0 0 8%；}.mat 列名 {右边框:1px 纯灰色；align-self: 拉伸；文本对齐:居中；}.mat 列位置 {右边框:1px 纯灰色；align-self: 拉伸；文本对齐:居中；}.mat 列权重 {右边框:1px 纯灰色；align-self: 拉伸；文本对齐:居中；}.mat-column-symbol {文本对齐:居中；align-self: 拉伸；}.mat 列权重 {align-self: 拉伸；}

尝试分别为 mat-h​​eader-row 和 mat-row 设置溢出属性；它解析背景颜色，但随后标题行和数据行可以在不同步的情况下单独滚动.

HTML 文件如下:

<mat-toolbar color="primary">项目时间概览报告<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>&nbsp;<button class="btn btn-sm btn-primary" *ngxPermissionsOnly="['attendance-all-leave-balance-read']" [disabled]="selectedYear==''"(click)="loadData()">查看报告</button></mat-toolbar><div class="form"><mat-form-field floatPlaceholder="never" color="primary"><input matInput #filter placeholder="过滤器"></mat-form-field>
<mat-table #table [dataSource]="dataSource" matSort class="mat-cell"><ng-container matColumnDef="sno"><mat-h​​eader-cell *matHeaderCellDef>S.No.</mat-h​​eader-cell><mat-cell *matCellDef="let timesReport; let i = index;">{{i+1}}</mat-cell></ng-容器><ng-container matColumnDef="timesCode"><mat-h​​eader-cell *matHeaderCellDef>时代代码</mat-h​​eader-cell><mat-cell *matCellDef="let timesReport">{{timesReport.timesCode}}</mat-cell></ng-容器><ng-container matColumnDef="projectName"><mat-h​​eader-cell *matHeaderCellDef>项目</mat-h​​eader-cell><mat-cell *matCellDef="let timesReport">{{timesReport.projectName}}</mat-cell></ng-容器><ng-container matColumnDef="team"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>团队</mat-h​​eader-cell><mat-cell *matCellDef="let timesReport">{{getTeamDesc(timesReport)}}</mat-cell></ng-容器><ng-container matColumnDef="部门"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>部门</mat-h​​eader-cell><mat-cell *matCellDef="let timesReport">{{getDeptDesc(timesReport)}}</mat-cell></ng-容器><ng-container matColumnDef="allocatedWorkload"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>分配的PD</mat-h​​eader-cell><mat-cell *matCellDef="let timesReport">{{timesReport.allocatedWorkload}}</mat-cell></ng-容器><ng-container matColumnDef="activity"><mat-h​​eader-cell *matHeaderCellDef>Activity</mat-h​​eader-cell><mat-cell *matCellDef="let timesReport">{{timesReport.activity}}</mat-cell></ng-容器><ng-container matColumnDef="actualWorkload"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>实际接收的PD</mat-h​​eader-cell><mat-cell *matCellDef="let timesReport">{{timesReport.actualWorkload}}</mat-cell></ng-容器><ng-container matColumnDef="createdBy"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>创建者</mat-h​​eader-cell><mat-cell *matCellDef="let timesReport">{{timesReport.createdBy}}</mat-cell></ng-容器><ng-container matColumnDef="creationDate"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>创建日期</mat-h​​eader-cell><mat-cell *matCellDef="let timesReport">{{timesReport.creationDate}}</mat-cell></ng-容器><ng-container matColumnDef="approvedBy"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>批准人</mat-h​​eader-cell><mat-cell *matCellDef="let timesReport">{{timesReport.approvedBy}}</mat-cell></ng-容器><ng-container matColumnDef="approvalDate"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>批准日期</mat-h​​eader-cell><mat-cell *matCellDef="let timesReport">{{timesReport.approvalDate}}</mat-cell></ng-容器><ng-container matColumnDef="claimed"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>声明的PD</mat-h​​eader-cell><mat-cell *matCellDef="let timesReport">{{timesReport.claimed}}</mat-cell></ng-容器><ng-container matColumnDef="unclaimed"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>无人认领的PD</mat-h​​eader-cell><mat-cell *matCellDef="let timesReport">{{timesReport.unclaimed}}</mat-cell></ng-容器><ng-container matColumnDef="gapActualAllocated"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>差距(实际与分配)</mat-h​​eader-cell><mat-cell *matCellDef="let timesReport">{{timesReport.gapActualAllocated}}</mat-cell></ng-容器><ng-container matColumnDef="lossPD"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>损失PD</mat-h​​eader-cell><mat-cell *matCellDef="let timesReport">{{timesReport.lossPD}}</mat-cell></ng-容器><mat-h​​eader-row *matHeaderRowDef="dispProjectTimesReportColumns"></mat-h​​eader-row><mat-row *matRowDef="let row; columns: dispProjectTimesReportColumns;"></mat-row></mat-table><div class="no-results" [style.display]="dataSource.renderedData.length == 0 ? '' : 'none'">未找到结果

<mat-paginator #paginator [length]="dataSource.filteredData.length" [pageIndex]="0" [pageSize]="100"[pageSizeOptions]="[25, 50, 100, 200]"></mat-paginator>

按照迪普的回答后出现的背景如下:

解决方案

使用这个

 .mat-h​​eader-row{宽度:适合内容！重要；}.mat-row{宽度:适合内容！重要；}

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.

I have around 30 columns in my table, so need horizontal scroll for sure.

My CSS is as follows:

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

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 File is as follows:

<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> &nbsp;
        <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>

Background appears as follows after following Deepu's answer:

解决方案

Use this

    .mat-header-row{
            width: fit-content !important;
    }
    .mat-row{
            width: fit-content !important;
    }

这篇关于水平滚动上的垫表背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！