Angular mat-table weird alignment with cells containing long strings

Question

I just got the mat-table to work, but I'm having some real problems fixing the alignment on it, I'm unsure how to manipulate it but would really need the cells to be left-aligned, just as the headers are.

A picture of how the table looks at the moment might help: [![enter image description here][1]][1] As you can see the alignment is really off, I've been looking at some threads here on Stack Overflow and github but haven't been able to implement any of the suggestions.

Currently my css looks super-simple like this:

table {
    width: 100%;
  }

And my html looks like this:

<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>

Is there a simple way to left-align the values like the headers are aligned? [1]: https://i.sstatic.net/i5SyD.png

Answer 1

You can have like this instead of using td and th, unless you want to particularly use table tags

 <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>