Как изменить границы отдельных мат-клеток?

Question

У меня есть приложение Angular со следующей таблицей:

  <mat-table #table [dataSource]="dataSource" style="width: 100%; table-layout: fixed;" >
    <ng-container matColumnDef="network">
      <mat-header-cell *matHeaderCellDef>Network</mat-header-cell>
      <mat-cell *matCellDef="let row">
        <span class="truncate-text">{{row.network}}</span>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="config">
      <mat-header-cell *matHeaderCellDef [ngClass]="'shortWidth'">Config</mat-header-cell>
      <mat-cell *matCellDef="let row" [ngClass]="'shortWidth'">
        <span class="truncate-text">{{row.config}}</span>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="value">
      <mat-header-cell *matHeaderCellDef >Value</mat-header-cell>
      <mat-cell *matCellDef="let row">
        <span class="truncate-text">{{row.value}}</span>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; let i=index; columns: displayedColumns;" style="min-height: 34px;">
    </mat-row>
  </mat-table>

Я хотел бы удалить границу между строками для первой "сети" mat-cell. Я пробовал разные вещи, например:

<mat-cell *matCellDef="let row" [ngStyle]="{'border': 'none'}">
<mat-cell *matCellDef="let row" [ngStyle]="{'border': '0'}">
<mat-cell *matCellDef="let row" [ngStyle]="{'border-bottom-width': '0'}">

И все виды вещей, но ничего не работает. Кажется, что стиль mat-row, включающий границу между строками, не может быть переопределен.

Answer 1

для таблицы данных отображается граница таблицы материалов. если вы не хотите показывать границу, вам нужно добавить это [ngStyle] = "{'border': 'none'}" в строке. после скрытия границы от строки, теперь вы можете добавить границу для отдельных ячеек.

ваш код будет выглядеть следующим образом

<mat-table #table [dataSource]="dataSource" style="width: 100%; table-layout: fixed;" >
    <ng-container matColumnDef="network">
      <mat-header-cell *matHeaderCellDef>Network</mat-header-cell>
      <mat-cell *matCellDef="let row">
        <span class="truncate-text">{{row.network}}</span>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="config">
      <mat-header-cell *matHeaderCellDef [ngClass]="'shortWidth'">Config</mat-header-cell>
      <mat-cell [ngStyle]="{'border-top': '1px solid black'}" *matCellDef="let row" [ngClass]="'shortWidth'">
        <span class="truncate-text">{{row.config}}</span>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="value">
      <mat-header-cell *matHeaderCellDef >Value</mat-header-cell>
      <mat-cell [ngStyle]="{'border-top': '1px solid black'}" *matCellDef="let row">
        <span class="truncate-text">{{row.value}}</span>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row [ngStyle]="{'border': 'none'}" *matRowDef="let row; let i=index; columns: displayedColumns;" style="min-height: 34px;">
    </mat-row>
  </mat-table>

нажмите, чтобы посмотреть демо