md-table-列幅を更新する方法

プロジェクトでmd-tableを使い始めましたが、列幅を固定したいと思っています。現在、すべての列の幅は同じサイズに分割されています。

データテーブルのディメンションのドキュメントはどこで入手できますか？

https://material.angular.io/components/table/overview

Materialがテーブルを作成すると、各列のスタイル設定に使用できる2つのクラス名が自動的に適用されます。以下の例では、スタイルの名前はmat-column-userIdandcdk-column-userIdです。

<ng-container cdkColumnDef="userId">
  <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
  <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
</ng-container>

これで、cssでこれらの名前を使用できます。

.mat-column-userId {
  flex: 0 0 100px;
}

Rahul Patilの回答に似ていますが、列定義に別のクラスを追加する必要はありません。

現在、APIレベルではまだ公開されていません。ただし、これに似たものを使用してそれを達成することができます

<ng-container cdkColumnDef="userId" >
  <md-header-cell *cdkHeaderCellDef [ngClass]="'customWidthClass'"> ID </md-header-cell>
  <md-cell *cdkCellDef="let row" [ngClass]="'customWidthClass'"> {{row.id}} </md-cell>
</ng-container>

cssでは、このカスタムクラスを追加する必要があります-

.customWidthClass{
   flex: 0 0 75px;
}

ここにクラスまたはカスタム幅を追加するロジックを自由に入力してください。列にカスタム幅が適用されます。

md-tableはを使用flexするため、フレックス方式で固定幅を指定する必要があります。これは簡単に説明します-

0 =成長しない（flex-growの省略形）

0 =縮小しない（flex-shrinkの省略形）

75px = 75pxから開始（フレックスベースの省略形）

ここにプランカー-https ： //plnkr.co/edit/v7ww6DhJ6zCaPyQhPRE8？p = preview

プロジェクトでangular / flex-layoutを使用している場合は、mat-h​​eader-cellとmat-cellにfxFlexディレクティブを追加することで列を設定できます。

 <ng-container matColumnDef="name" >
      <mat-header-cell fxFlex="100px" *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
      <mat-cell  fxFlex="100px" *matCellDef="let row;" (click)="rowClick(row)">{{row.Name}}</mat-cell>
 </ng-container>

それ以外の場合は、カスタムCSSを追加して、同じ結果を得ることができます。

.mat-column-name{
    flex: 0 0 100px;
}

これを確認してください：https：//github.com/angular/material2/issues/5808

material2はフレックスレイアウトを使用しているため、fxFlex="40"（またはfxFlexに必要な値）をmd-cellとに設定するだけmd-header-cellです。

jymdmanとRahulPatilの答えの組み合わせが私にとって最も効果的であることがわかりました。

.mat-column-userId {
  flex: 0 0 75px;
}

また、さまざまなデバイス間で常に一定のスペースを占有したい1つの「先頭」列がある場合、より応答性の高い種類で利用可能なコンテナ幅に採用するのに非常に便利な次の列が見つかりました（これにより残りの列が残りのスペースを均等に使用します）：

.mat-column-userName {
  flex: 0 0 60%;
}

角度素材ドキュメントの使用

.mat-column-userId {
    max-width: 40px;
}

テーブルコンポーネントが列幅を変更するため。繰り返しますが、userIdはセル名になります。

FlexLayoutを使用して、FlexLayoutが提供するクエリメディアに従って列幅を更新しています。

fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20" fxFlex.gt-md="25"

これは、この列がデフォルトで行幅の30％を使用することを意味します。gt-xs@ mediaQueryが満たされると、新しい幅は15％になり、他の条件でも同様の動作になります。

<!-- CURRENTBALANCE COLUMN-->
  <ng-container cdkColumnDef="balance_2">
    <mat-header-cell fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20"
       fxFlex.gt-md="25" fxLayout="row" fxLayoutAlign="center center"
       *cdkHeaderCellDef>{{ balanceTable.datesHeaders[2] }}</mat-header-cell>
    <mat-cell fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20" fxFlex.gt-md="25" 
      *cdkCellDef="let eventTop">
      <div fxLayout="column" fxLayoutAlign="center center">
        <!-- CELL_CONTENT-->
      </div>
    </mat-cell>
  </ng-container>
<!-- CURRENTBALANCE COLUMN-->

FlexLayoutと@MediaQueriesの詳細については、https： //github.com/angular/flex-layout/wiki/Responsive-APIをご覧ください。

私はちょうど使用しました：

th:nth-child(4) {
    width: 10%;
}

4を、幅を調整する必要のあるヘッダーの位置に置き換えます。使用されているドキュメントの例：

td, th {
  width: 25%;
}

だから私はそれを修正して欲しいものを手に入れました。

.mat-cellクラスをflexに設定できます：0 0 200px; フレックスの代わりに：1とn番目の子。

.mat-cell:nth-child(2), .mat-header-cell:nth-child(2) {
    flex: 0 0 200px;
}

あなたは今このようにそれを行うことができます

<cdk-cell [style.flex]="'0 0 75px'">

fxFlex「@angular / flex-layout」thから次のtdように使用できます：

<ng-container matColumnDef="value">
      <th mat-header-cell fxFlex="15%" *matHeaderCellDef>Value</th>
            <td mat-cell *matCellDef="let element" fxFlex="15%" fxLayoutAlign="start center">
                           {{'value'}}
            </td>
       </th>
</ng-container>

.mat-column-skills {
    max-width: 40px;
}

要素セレクターを使用することもできます。

mat-header-cell:nth-child(1), mat-cell:nth-child(1) {
    flex: 0 0 64px;
}

しかし、ほとんどの場合、jymdmanの答えが最も推奨される方法です。

サンプルのマットテーブル列と対応するCSS：

HTML /テンプレート

<ng-container matColumnDef="">
  <mat-header-cell *matHeaderCellDef>
     Wider Column Header
  </mat-header-cell>
  <mat-cell *matCellDef="let displayData">
    {{ displayData.value}}
  </mat-cell>`enter code here`
</ng-container>

CSS

.mat-column-courtFolderId {
    flex: 0 0 35%;
}

必要に応じて、マークアップに直接スタイリングを追加することもできます。

<ng-container matColumnDef="Edit">
     <th mat-header-cell *matHeaderCellDef > Edit </th>
     <td mat-cell *matCellDef="let element" (click)="openModal()" style="width: 50px;"> <i class="fa fa-pencil" aria-hidden="true"></i> </td>
</ng-container>

テーブル列が多すぎてmd-table、を使用して角度テーブルで調整されていない場合は、次のスタイルをcomponent.cssファイルに貼り付けます。横スクロールビューのチャームのように機能します。

.mat-table__wrapper .mat-table {
    min-width: auto !important;
    width: 100% !important; }

.mat-header-row {
    width: 100%; }

.mat-row {
    width: 100%;
}

このスタイルを追加して、列を個別に変更します。

.mat-column-{colum-name} {
    flex: 0 0 25% !important;
    min-width: 104px !important;
}

または、このリンク（上記のコードの出所）で詳細を確認してください。

例を見てみましょう。テーブルに次のような列がある場合：

<!-- ID Column -->
  <ng-container matColumnDef="id" >
    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
    <td mat-cell *matCellDef="let row"> {{row.sid}} </td>
  </ng-container>

 <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let row"> {{row.name}} </td>
  </ng-container>

これには2つの列が含まれているためです。次に、を使用して列の幅を設定できます

.mat-column-<matColumnDef-value>{
    width: <witdh-size>% !important;
}

この例では、

  .mat-column-id{
    width: 20% !important;      
  }
  .mat-column-name{
    width: 80% !important;
  }

私はこれに対する非常に簡単な解決策を得ました-セルとヘッダーセルの両方をオーバーライドすることによってスタイルシートの列に異なる幅を設定します：

例-1列目と5列目のカスタム幅の設定：

.mat-cell:nth-child(1),
.mat-header-cell:nth-child(1) {
  flex: 0 0 5%;
}
.mat-cell:nth-child(5),
.mat-header-cell:nth-child(5) {
  flex: 0 0 10%;
}

github