Angular Material Table cannot center columns

Description

Bug, feature request, or proposal:

I am using Angular Material Table and I am trying to center all the columns By these images I mean what I am trying to achieve and that is merely a centering of the columns. I have given a link to a StackBlitz demo, which is the one from the Offical Docs. It would be more than enough if you manage to center the columns.

I have tried

display: flex;
justify-content: center;

, but it worked ifff I used the <mat-table> tags, but as I want a better horizontal scrolling, but I had to move to <table mat-table>, which I like more btw and <mat-table> doesn’t support horizontal scrolling well. When I apply the aforementioned CSS everything breaks.

If I try to do it the old school way with text-align: center The headers are misaligned and the columns are as well due to paddings inside the cells.

If you have any ideas, please share them.

What is the expected behavior?

All the columns are centered.

What is the current behavior?

Nothing is centered

🔬 Minimal Reproduction

StackBlitz starter: https://stackblitz.com/angular/ndjvyykgoje?file=app%2Ftable-basic-example.ts

🌍 Your Environment

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 7.1.3
Node: 10.14.2
OS: linux x64
Angular: 7.1.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.3
@angular-devkit/build-angular     0.11.3
@angular-devkit/build-optimizer   0.11.3
@angular-devkit/build-webpack     0.11.3
@angular-devkit/core              7.1.3
@angular-devkit/schematics        7.1.3
@angular/cdk                      7.2.0
@angular/cli                      7.1.3
@angular/flex-layout              7.0.0-beta.22
@angular/material                 7.2.0
@ngtools/webpack                  7.1.3
@schematics/angular               7.1.3
@schematics/update                0.11.3
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

[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

[ghost]

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