Increase gap between mat rows in mat-table angular

Question

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

What I'm getting:

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

What I need:

[---MAT-ROW---]

[---MAT-ROW---]

[---MAT-ROW---]

Tried to add border spacing to mat-table....also added border-collapse...still not working.

can anyone help me with this. Thanks...!

Answer 1

Use the below 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

Add this style in styles.css

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

For overwritten existing style you need to add inside styles.css

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