Chrome角垫表中粘性标题行之间的空格

Question

我有一个有两个粘性标题的垫子。代码在Firefox中运行良好，但在Chrome中，当我向下滚动时，我可以在两个标题的背景中看到文本。标题单元格之间有一些空格，它们不会出现在Firefox浏览器中，但会出现在chrome中。

作为示例，我将表格背景添加为红色，正如您所看到的，在前2行之间出现了红线。此外，也没有边界。table-image

守则内容如下：

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代码

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

我已经尝试过边界折叠，但这不起作用。

Answer 1

根据需要，在.mat-cell和.mat-header-cell中添加min-width: 200px；。那个可以