Странное выравнивание угловых таблиц матов с ячейками, содержащими длинные строки

Question

Я только что заставил таблицу матов работать, но у меня есть некоторые реальные проблемы с исправлением выравнивания на нем, я не уверен, как манипулировать им, но действительно нужно, чтобы ячейки были выровнены по левому краю, так же какЗаголовки есть.

Может помочь изображение того, как выглядит таблица в данный момент: [! [Введите описание изображения здесь] [1]] [1] Как вы видите, выравнивание действительно отключено, я смотрел нанекоторые темы здесь, в Stack Overflow и github, но не смогли реализовать ни одно из предложений.

В настоящее время мой CSS выглядит очень просто:

table {
    width: 100%;
  }

И мой HTML выглядит так:

<h3> All Uploaded invoices:</h3>
<div class="invoice-table mat-elevation-z8">
  <table mat-table #table [dataSource]="invoices">

    <ng-container matColumnDef="rating">
      <th mat-header-cell *matHeaderCellDef> Rating </th>
      <td mat-cell *matCellDef="let invoice"> {{invoice.rating}} </td>
    </ng-container>

    <ng-container matColumnDef="amount">
      <th mat-header-cell *matHeaderCellDef> Amount </th>
      <td mat-cell *matCellDef="let invoice"> {{invoice.amount}} </td>
    </ng-container>

    <ng-container matColumnDef="debtor">
      <th mat-header-cell *matHeaderCellDef> Debtor </th>
      <td mat-cell *matCellDef="let invoice"> {{invoice.debtor}} </td>
    </ng-container>

    <ng-container matColumnDef="serial">
      <th mat-header-cell *matHeaderCellDef> Serial </th>
      <td mat-cell *matCellDef="let invoice"> {{invoice.serial}} </td>
    </ng-container>

    <ng-container matColumnDef="dateout">
      <th mat-header-cell *matHeaderCellDef> Dateout </th>
      <td mat-cell *matCellDef="let invoice"> {{invoice.dateout}} </td>
    </ng-container>

    <ng-container matColumnDef="expiration">
      <th mat-header-cell *matHeaderCellDef> Expiration </th>
      <td mat-cell *matCellDef="let invoice"> {{invoice.expiration}} </td>
    </ng-container>

    <ng-container matColumnDef="daysleft">
      <th mat-header-cell *matHeaderCellDef> Days left </th>
      <td mat-cell *matCellDef="let invoice"> {{invoice.daysleft}} </td>
    </ng-container>

    <ng-container matColumnDef="fid">
      <th mat-header-cell *matHeaderCellDef> Fid </th>
      <td mat-cell *matCellDef="let invoice"> {{invoice.fid}} </td>
    </ng-container>


    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <mat-paginator [pageSizeOptions]="[20, 100, 200]" showFirstLastButtons></mat-paginator> 
</div>
<p><a [routerLink]="['/login']">Logout</a></p>

Есть ли простой способ выравнивания по левому краюзначения как заголовки выровнены?[1]: https://i.stack.imgur.com/i5SyD.png

Answer 1

Для меня все выглядит хорошо, кроме класса invoice-table для элемента table

Применяете ли вы какие-либо свойства css в этом?как дополнение или что-то к дочерним элементам?

Answer 2

Вы можете использовать это вместо использования td и th, если только вы не хотите особенно использовать теги таблицы

 <mat-table #table [dataSource]="invoices">
    <ng-container matColumnDef="dateout">
          <mat-header-cell *matHeaderCellDef> Dateout </mat-header-cell>
          <mat-cell *matCellDef="let invoice"> {{invoice.dateout}} </mat-cell>
        </ng-container>

</mat-table>