2017-09-11 23 views
3

md-sort-headerがmd-tableのmd-header-cellに追加されている場合は、常に左揃えです。 "名前"などのヘッダーセルを中央揃えにする方法角材2テーブルヘッダの中心合わせ

<md-header-cell *cdkHeaderCellDef md-sort-header style="text-align:center"> Name </md-header-cell> 

plnkr

答えて

2

md-header-cellは、クラス= "マットソートヘッダコンテナ" の容器に '翻訳' う。それを使用して、スタイルをng-deepに設定します。だから、コンポーネントのスタイルシートに次のように置く:

次のいずれか

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

または

mat-header-cell { 
    display:flex; 
    justify-content:flex-end; 
    } 

DEMO

+0

私の答えは、同様の問題に関連する将来の参照のために見てください。答えは+1です。 – Faisal

2

受け入れ答えが正しいです。ただし、::ng-deepは償却され、将来廃止される可能性があります(official documentation)。

シャドーピアス子孫コンビネータが廃止され、サポートは 主要なブラウザやツールから削除されています。そのため、 のサポートをAngularにする予定です(/ deep /、>>>および:: ng-deepの3つすべてに対して)。 まで::: ng-deepは、ツール との広範な互換性を優先する必要があります。

適切な方法はViewEncapsulationです。あなたのcomponent.tsでは、次の行を追加します。

import { ViewEncapsulation } from '@angular/core'; 

@Component({ 
    .... 
    encapsulation: ViewEncapsulation.None 
}) 

とあなたのcomponent.cssファイル内のクラスをオーバーライド:

.mat-sort-header-container { 
    display:flex; 
    justify-content:center; 
} 
+0

:ng-deepは無視されません!それは/ deep/onlyです。カプセル化が他のクラスに影響を与える可能性があります – Vega

+1

ドキュメントを読んでください: 'シャドウピアス子孫コンビネータは廃止され、サポートは主要なブラウザやツールから削除されています。このように私たちはAngularでサポートを中止するつもりです(/ deep/>>>と:: ng-deep)。 – Faisal

+0

@Vega、あなたの答えがうまくいかないと言っているわけではありません。将来の '' ng-deep''は完全に削除されます。 – Faisal

0

を私が問題に与えられた解決策は、彼らのアプローチでは、あまりにも厳しいと思います、私はmat-sort-header-containerのいくつかのCSSプロパティを変更する必要があったが、同様の問題があった。

私はベガの答えのような何かをしたが、微妙に異なるスタイルが取られる方法に関する:

::ng-deep .mat-sort-header-container{ 
    justify-content: inherit; 
    /* other inheritable properties */ 
} 

スタイルmat-header-cellに、その親のためのいくつかのプロパティを開くあなたのhtmlコードにあるように、何でもあなたが提供するスタイルmat-header-cellにし、その親から継承しているng-deepでは、それらのスタイルだけがその階層を下ることになります。

関連する問題