Components: Angular Material Table cannot center columns

[DenisBarzanov]

I got it working in StackBlitz using the example in the Material Table Overview using this CSS:

table {

  text-align: center !important;

  width: 100%;

}


.mat-header-cell {

  text-align: center;

}

But I still can't make it work in my project.

It only centers the first header cell. Even in chrome dev tools, when I turn off every style having to do with text alignment - it still doesn't center my headers.

Also when I remove the sort header - it starts working.
The sort header hinders the alignment of text

[lroedal]

You should omit td and tr, and use 'mat-table' instead of 'table mat-table'. I've provided a Stackblitz where the columns are centered: https://stackblitz.com/edit/mat-table-centered-columns

[DenisBarzanov]

I edited my question (The tags didn't show up before). I went on and used <table mat-table>, because it provides support for horisontal scrolling. I couldn't find anything about centering <table mat-table>, nor did I find about horisontal scrolling on <mat-table>.
I cannot center the columns, because of the mat-sort-header.

[lroedal]

I edited the stackblitz to include horizontal scrolling. The thing is, when using flex, it will use the size available. That means, if you want it to 'overflow', you will have to set a specific size for the columns, either in % or px. For the sort headers, you can just offset the table header with the same size that the sort-button and padding occupies.

[DenisBarzanov]

I really appreciate your StackBlitz example, but why does every example in the documentation use <table mat-table> as opposed to <mat-table>. Also, you are breaking some styles for the borders and then fixing them manually with CSS.
For example this answer from StackOverflow also says that you should instead use <mat-table>. I personally find it really frustrating and confusing. I kind of got it working using the css from your example (the overflow sort of broke my toolbar when the table was , but when I wanted to add sticky headers for instance - I had to do some manual css (which couldn't work out for me) instead of just sticky: true and sticky, which are available for <table mat-table>.
In the end I think that they didn't bother to make it easy, because maybe centering columns is a bad practice and should be avoided.
Thanks for your time buddy!

[andrewseguin]

Seems like you may not be centering the sorted headers. One way to do this would be to add this styling:

:host ::ng-deep .mat-sort-header-container {
    display: flex;
    justify-content: center;
}

If you need more help, I suggest putting together a full reproduction in Stackblitz that others can help you debug and style. I'll close this since its not an issue, but more of a troubleshooting question

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}