[英]Space between sticky header rows in Angular mat table in Chrome
I have a mat-table with 2 sticky headers.我有一个带有 2 个粘性标题的垫子表。 The code works fine in Firefox but in Chrome, when I scroll down, I can see the text in the background of 2 headers.
该代码在 Firefox 中运行良好,但在 Chrome 中,当我向下滚动时,我可以看到 2 个标题的背景中的文本。 There is some space between header cells that do not appear in the Firefox browser but does appear in chrome.
在 Firefox 浏览器中没有出现但在 chrome 中出现的标题单元格之间有一些空间。
As an example, I have added the table background as red, and as you can see the red lines appear between the first 2 rows.例如,我将表格背景添加为红色,您可以看到前两行之间出现了红线。 Also, there are no borders.
此外,没有边界。 table-image
表图像
The Code is as below:代码如下:
HTML Code: HTML代码:
<div>
<button mat-raised-button (click)="tables.push(tables.length)">Add table</button>
<button mat-raised-button (click)="tables.pop()">Remove table</button>
</div>
<div>
Sticky Headers:
<mat-button-toggle-group multiple [value]="['header-1']" #stickyHeaders="matButtonToggleGroup"
class="example-sticky-toggle-group">
<mat-button-toggle value="header-1"> Row 1 </mat-button-toggle>
<mat-button-toggle value="header-2"> Row 2 </mat-button-toggle>
</mat-button-toggle-group>
</div>
<div>
Sticky Footers:
<mat-button-toggle-group multiple [value]="['footer-1']" #stickyFooters="matButtonToggleGroup"
class="example-sticky-toggle-group">
<mat-button-toggle value="footer-1"> Row 1 </mat-button-toggle>
<mat-button-toggle value="footer-2"> Row 2 </mat-button-toggle>
</mat-button-toggle-group>
</div>
<div>
Sticky Columns:
<mat-button-toggle-group multiple [value]="['position', 'symbol']" #stickyColumns="matButtonToggleGroup"
class="example-sticky-toggle-group">
<mat-button-toggle value="position"> Position </mat-button-toggle>
<mat-button-toggle value="name"> Name </mat-button-toggle>
<mat-button-toggle value="weight"> Weight </mat-button-toggle>
<mat-button-toggle value="symbol"> Symbol </mat-button-toggle>
</mat-button-toggle-group>
</div>
<div class="example-container mat-elevation-z8">
<table mat-table [dataSource]="dataSource" *ngFor="let table of tables">
<ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
<mat-header-cell *matHeaderCellDef> Position </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
<mat-footer-cell *matFooterCellDef> Position Footer </mat-footer-cell>
</ng-container>
<ng-container matColumnDef="name" [sticky]="isSticky(stickyColumns, 'name')">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
<mat-footer-cell *matFooterCellDef> Name Footer </mat-footer-cell>
</ng-container>
<ng-container matColumnDef="weight" [stickyEnd]="isSticky(stickyColumns, 'weight')">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
<mat-footer-cell *matFooterCellDef> Weight Footer </mat-footer-cell>
</ng-container>
<ng-container matColumnDef="symbol" [stickyEnd]="isSticky(stickyColumns, 'symbol')">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
<mat-footer-cell *matFooterCellDef> Symbol Footer </mat-footer-cell>
</ng-container>
<ng-container matColumnDef="filler">
<mat-header-cell *matHeaderCellDef> Filler header cell </mat-header-cell>
<mat-cell *matCellDef="let element"> Filler data cell </mat-cell>
<mat-footer-cell *matFooterCellDef> Filler footer cell </mat-footer-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-1')"></mat-header-row>
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-2')"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
<mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></mat-footer-row>
<mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></mat-footer-row>
</table>
</div>
CSS Code CSS 代码
.example-container {
height: 400px;
overflow: auto;
}
.mat-table-sticky {
background: #59abfd;
opacity: 1;
border-collapse: collapse;
}
.mat-table {
background-color: red;
border-collapse: collapse;
}
.example-sticky-toggle-group {
margin: 8px;
}
.mat-column-filler {
padding: 0 8px;
font-size: 10px;
text-align: center;
}
.mat-header-cell,
.mat-footer-cell,
.mat-cell {
min-width: 80px;
box-sizing: border-box;
}
.mat-header-row,
.mat-footer-row,
.mat-row {
min-width: 1920px; /* 24 columns, 80px each */
}
.mat-table-sticky-border-elem-top {
border-bottom: 2px solid midnightblue;
}
.mat-table-sticky-border-elem-right {
border-left: 2px solid midnightblue;
}
.mat-table-sticky-border-elem-bottom {
border-top: 2px solid midnightblue;
}
.mat-table-sticky-border-elem-left {
border-right: 2px solid midnightblue;
}
I have already tried border-collapse but that does not work.我已经尝试过边界折叠,但这不起作用。
Add min-width: 200px;添加最小宽度:200px; As per your requirement, to the .mat-cell and .mat-header-cell.
根据您的要求,到 .mat-cell 和 .mat-header-cell。 That will do
那会做
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.