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

前回の記事で作ったテーブルの各列の幅をテーブル全体のサイズに合わせて％で調整したい場合は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% ;の部分でテーブル全体の幅に対しての各列の幅の割合を指定しています。これでブラウザ画面の幅に対してテーブルと各列の幅が自動で調整されるようになります。