angular - 增加垫子表 Angular 中垫子行之间的间隙

Question

我的 table :

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