9列を使用しているマテリアルテーブルがあります。画面が小さくなっても同じ列サイズを維持したいと思います。
現在、画面を縮小すると、最後の列が最初にシャークしますが、他のグループはまだ同じサイズであるため、少し奇妙に見えます。
とにかく、画面サイズが小さくなっても「合計決済金額」で同じ列サイズをサポートできるのでしょうか?
以下は私のstackblitzです
https://stackblitz.com/edit/angular-bklajw-5foa62?file=app%2Ftable-basic-example.ts
私の要求であなたの問題を明らかにしてくれてありがとう。この動作のために私が使用することをお勧めします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-width
てmax-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*/
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加