角材2テーブルヘッダの中心合わせ

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

出典

2017-09-11 Yong

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

出典

2017-09-11 12:21:13 Vega

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

受け入れ答えが正しいです。ただし、::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; 
}

出典

2017-09-11 12:45:39 Faisal

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

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

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

を私が問題に与えられた解決策は、彼らのアプローチでは、あまりにも厳しいと思います、私は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では、それらのスタイルだけがその階層を下ることになります。

出典

2018-01-25 09:13:47

角材2テーブルヘッダの中心合わせ

答えて

関連する問題