增加垫子台角度中垫子行之间的间隙

Question

我的桌子：

<mat-table  [dataSource]="dataSource" >
        
    <!-- Position Column -->
    <ng-container matColumnDef="Customer">
      <mat-header-cell *matHeaderCellDef > CUSTOMER </mat-header-cell>
      <mat-cell *matCellDef="let element" > {{element.Customer}} </mat-cell>
    </ng-container>
    
 
    <!-- Name Column -->
    <ng-container matColumnDef="Origin">
      <mat-header-cell *matHeaderCellDef> ORIGIN </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.Origin}} </mat-cell>
    </ng-container>
 
    <ng-container matColumnDef="Destination">
      <mat-header-cell *matHeaderCellDef> DESTINATION </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.Destination}} </mat-cell>
    </ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" ></mat-row>
  </mat-table>

CSS：

.mat-table {
border-collapse: separate;
border-spacing:04px;
}

我得到什么：

[---MAT-ROW---]
[---MAT-ROW---]
[---MAT-ROW---]
[---MAT-ROW---]

我需要的：

[---MAT-ROW---]

[---MAT-ROW---]

[---MAT-ROW---]

尝试向 mat-table 添加边框间距...还添加边框折叠...仍然不起作用。

谁能帮我这个。谢谢...！

Answer 1

使用下面的CSS。

.mat-table {
    overflow-x: scroll;
    max-width: 99%;
  }
  
  .mat-cell,
  .mat-header-cell {
    word-wrap: initial;
    display: table-cell;
    padding: 0px 10px;
    line-break: unset;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
  }
  
  .mat-row,
  .mat-header-row {
    display: table-row;
  }

Answer 2

添加这个样式styles.css

.mat-table {
  border-collapse: separate!important;
  border-spacing:0 4px!important;
}

对于覆盖现有样式，您需要在内部添加styles.css

https://stackblitz.com/edit/ng-fullpage-scrolltable-pl2myn