角度のあるマテリアルテーブルで画面サイズを縮小するときに同じ列サイズをサポートする方法

Dec 15 2020

9列を使用しているマテリアルテーブルがあります。画面が小さくなっても同じ列サイズを維持したいと思います。

現在、画面を縮小すると、最後の列が最初にシャークしますが、他のグループはまだ同じサイズであるため、少し奇妙に見えます。

とにかく、画面サイズが小さくなっても「合計決済金額」で同じ列サイズをサポートできるのでしょうか?

以下は私のstackblitzです

https://stackblitz.com/edit/angular-bklajw-5foa62?file=app%2Ftable-basic-example.ts

画像を更新

回答

4 Awais Dec 15 2020 at 12:40

私の要求であなたの問題を明らかにしてくれてありがとう。この動作のために私が使用することをお勧めしますmin-widhtし、max-widhtあなたが作るためにtable、細胞は、すべての画面に似ています、あなたのstackblitzにCSSの下に使用してください

th.mat-header-cell,
td.mat-cell {
  text-align: center;
  border: 1px solid #ccc;
  padding: 0 !important;
  min-width: 100px;
  max-width: 100px;
}

また、シリアル番号であるため、最初のセルを小さく見せたい場合は、変更しmin-widthmax-width使用します。first-child

th.mat-header-cell:first-child,
td.mat-cell:first-child{
  min-width: 50px;
  max-width: 50px;
}

質問で述べたように「合計決済額」のみを変更するには、それらのセル(th td)でいくつかのクラスを使用し、上記のようにスタイルを設定します

 .similar-cell-width{
    min-width: 100px;
    max-width: 100px;
    width: 100px; /*solution as per your req it fix the table cell widht*/

 }