Angular Mat-table Weird Alignment With Cells Containing Long Strings

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,

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

Solution 2:

Everything looks good to me other than the invoice-table class on the table element

are you applying any kind of css property in that ? like a padding or something to the child elements ?