Реализация чипов

Похоже, ваша таблица HTML не имеет правильной структуры; таблица обычно имеет такую ​​структуру:

<table>
  <thead>
    <tr>
      <th>Column Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
    </tr>
  </tbody>
</table>

В вашем случае, однако, несколько сложно адаптировать все это к этой структуре. Поэтому вместо этого вы можете захотеть восстановить свой шаблон, но вам также понадобится небольшая помощь от CSS:

<ng-container matColumnDef = "type">
  <mat-chip-list class = "table">
    <div class = "row">
     <div class = "cell" mat-header-cell *matHeaderCellDef mat-sort-header = "type">Type</div>
    </div>
    <mat-chip class = "row" *matCellDef = "let truck of trucks" >
      <div mat-cell class = "cell pr-24">{{truck.type}}</div>
    </mat-chip>
  </mat-chip-list>
</ng-container>

.table { display:table; }
.row { display:table-row; }
.cell{ display:table-cell; }

P.S. если вы дадите мне рабочий пример (здесь или через stackblitz.com и т. д.), то я могу помочь вам добиться желаемого внешнего вида css.