mat-table misaligned headers

Question

When mat-table is re-rendered with more columns, some of it's headers(see how column4 and Column5 are not on the same line as Column1,2,3 and Column6) gets misaligned with others, like the following image. what could I do to improve the situation?

All the header columns have similar styling, see below element details.

<th _ngcontent-sjy-c336="" role="columnheader" mat-header-cell="" mat-sort-header="" class="mat-sort-header mat-header-cell cdk-header-cell ng-tns-c221-155 cdk-column-column2 mat-column-column2 ng-star-inserted mat-table-sticky mat-table-sticky-border-elem-top" ng-reflect-id="" aria-sort="none" style="top: 0px; z-index: 100;">
    <div class="mat-sort-header-container mat-focus-indicator ng-tns-c221-155" aria-describedby="cdk-describedby-message-5" cdk-describedby-host="0" tabindex="0" role="button">
        <div class="mat-sort-header-content ng-tns-c221-155"> Column2 </div>
        <div class="mat-sort-header-arrow ng-trigger ng-trigger-arrowPosition ng-tns-c221-155 ng-star-inserted" style="opacity: 0; transform: translateY(25%);">
            <div class="mat-sort-header-stem ng-tns-c221-155"/>
            <div class="mat-sort-header-indicator ng-tns-c221-155 ng-trigger ng-trigger-indicator" style="transform: translateY(0px);">
                <div class="mat-sort-header-pointer-left ng-tns-c221-155 ng-trigger ng-trigger-leftPointer" style="transform: rotate(-45deg);"/>
                <div class="mat-sort-header-pointer-right ng-tns-c221-155 ng-trigger ng-trigger-rightPointer" style="transform: rotate(45deg);"/>
                <div class="mat-sort-header-pointer-middle ng-tns-c221-155"/>
            </div>
        </div>
        <!--bindings={
  "ng-reflect-ng-if": "true"
}-->
    </div>
</th>

Note - I realize I may not have provided everything please do let me know what I need to share so you can provide your feedback.

Answer 1

To resolve this issue, I inspected the element using chrome's developer tool. I found out that a very specific rule was applied so I had to do the following to get what I needed.

CSS Code -

th.mat-header-cell {
    white-space: normal;
    text-align: center;
}

td.mat-cell:last-of-type{
    text-align-last: left;
}

I hope it helps someone.