与包含长字符串的单元格的角形垫台怪异对齐

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

您可以这样来代替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>

Answer 2

除了table元素上的invoice-table类，其他一切对我来说都很不错

您是否在其中应用任何类型的CSS属性？ 像填充或子元素的东西？