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

アプリ

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-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*/

 }

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

コンテンツサイズが変更されたときにサイズを変更するのではなく、マテリアルUIドロワーを同じサイズのままにする

テーブル内のdivを内のテキストと同じサイズにする方法は?

角度のあるマテリアルテーブルのサイズ変更列

マテリアルグリッドで各カードを同じサイズにする方法

SQLServerテーブル列の文字列を同じサイズのテキストに置き換える方法

異なるサイズのテーブルをSASの同じExcelタブにエクスポートする

GTKテーマでEclipseタブのサイズを縮小する

GTKテーマでEclipseタブのサイズを縮小する

リリースビルドで非常に大きな静的ライブラリのサイズを縮小する

カスタムステッカーアプリのファイルサイズを縮小する方法

Java-サードパーティのjarのサイズを縮小してアプリケーションのサイズを縮小する方法

画面サイズに基づいて異なるテンプレートで同じAngularルーターアウトレットを使用できますか

変形せずにマテリアルUIでコンポーネントのサイズを変更する

異なるdiv列で行の高さが異なる2つのテーブルを作成する方法は同じテーブルサイズです

ReactのマテリアルUIでアラートのアイコンサイズを変更する方法

サイズ制限のある複数のアーカイブに多くの同じサイズのファイルをtar.gzする方法

画面のサイズが変更されたときに、親コンテナで画像を拡大縮小する

BigQueryテーブルの複数の同じサイズの配列列をフラット化する

動的テーブルの列と行の値とサイズを取得する方法

liサイズをテキストのサイズと同じにする

画面のサイズを縮小するときに、GUIでステータスバー(フッター)が消えないようにします

Hive:テーブルをほぼ同じサイズのN個のテーブルに分割するSQL要求?

ValueError: データのカーディナリティがあいまいです: x サイズ: 60000 y サイズ: 10000 すべての配列に同じ数のサンプルが含まれていることを確認してください MNIST

同じ値でテーブルを更新すると、トランザクションログファイルのサイズが大きくなりますか?

Xamarinフォームでアプリのサイズを縮小する方法は?

ラジオボタンリストで列/アイテムリストを同じサイズにする方法-

ラジオボタンリストで列/アイテムリストを同じサイズにする方法-

テーブル サイズを div サイズに調整する方法は?

マテリアライズでフォントサイズをレスポンシブにする方法

TOP 一覧

  1. 1

    Unity:未知のスクリプトをGameObject(カスタムエディター)に動的にアタッチする方法

  2. 2

    セレンのモデルダイアログからテキストを抽出するにはどうすればよいですか?

  3. 3

    Ansibleで複数行のシェルスクリプトを実行する方法

  4. 4

    tkinterウィンドウを閉じてもPythonプログラムが終了しない

  5. 5

    Crashlytics:コンパイラー生成とはどういう意味ですか?

  6. 6

    GoDaddyでのCKEditorとKCfinderの画像プレビュー

  7. 7

    Windows 10 Pro 1709を1803、1809、または1903に更新しますか?

  8. 8

    Chromeウェブアプリのウェブビューの高さの問題

  9. 9

    モーダルダイアログを自動的に閉じる-サーバーコードが完了したら、Googleスプレッドシートのダイアログを閉じます

  10. 10

    Windows 10の起動時間:以前は20秒でしたが、現在は6〜8倍になっています

  11. 11

    Reactでclsxを使用する方法

  12. 12

    ファイル内の2つのマーカー間のテキストを、別のファイルのテキストのセクションに置き換えるにはどうすればよいですか?

  13. 13

    MLでのデータ前処理の背後にある直感

  14. 14

    グラフからテーブルに条件付き書式を適用するにはどうすればよいですか?

  15. 15

    Pythonを使用して同じ列の同じ値の間の時差を取得する方法

  16. 16

    mutate_allとifelseを組み合わせるにはどうすればよいですか

  17. 17

    ネットワークグラフで、ネットワークコンポーネントにカーソルを合わせたときに、それらを強調表示するにはどうすればよいですか?

  18. 18

    テキストフィールドの値に基づいて UIslider を移動します

  19. 19

    BLOBストレージからデータを読み取り、Azure関数アプリを使用してデータにアクセスする方法

  20. 20

    PowerShellの分割ファイルへのヘッダーの追加

  21. 21

    ソートされた検索、ターゲット値未満の数をカウント

ホットタグ

アーカイブ