【Angular】Mattableの各テーブルヘッダーの幅を画面幅に合わせて自動調整する

この記事は約4分で読めます。

 

前回の記事で作ったテーブルの各列の幅をテーブル全体のサイズに合わせて%で調整したい場合はcssを以下のように調整してあげればいい。

 

 

前回のソースコード:https://github.com/beginerSE/Angular-Demo/tree/master/angular-sample/src/app/ngtable-sample

 

 

 

<ngtable-sample.component.css>

.mat-column-position {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 30% !important;
  width: 30% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.mat-column-name {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 20% !important;
  width: 20% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.mat-column-weight {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 20% !important;
  width: 20% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}


.mat-column-symbol {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 30% !important;
  width: 30% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

 

 

flex: 0 0 20% ; width: 20% ;の部分でテーブル全体の幅に対しての各列の幅の割合を指定しています。これでブラウザ画面の幅に対してテーブルと各列の幅が自動で調整されるようになります。

 

 

 

 

 

 

 

関連記事:【Angular】mat-tableでヘッダーが複数行になるテーブルを作ってみる

 

参照:https://stackoverflow.com/questions/53020792/how-to-set-width-of-mat-table-column-in-angular/53023265

 

 

 

コメント

タイトルとURLをコピーしました