web-dev-qa-db-ja.com

変更方法Angular Material Table row height？

私のAngularアプリケーション（Angular Materialでスタイル設定）で）マテリアルテーブルを使用していくつかのデータを表示する必要があります。

このテーブルには、スティッキーヘッダー、複数の行、スティッキーフッターがあります。

デフォルトでは、行の高さは62.5pxです。この値を上書きしたいと思います。

どうすればそれを達成できますか？

Tr/tr.mat-row/tr.mat-h​​eader-rowなどのcssスタイルをオーバーライドしようとしましたが、成功しませんでした。私も:: ng-deepを使ってみました。

また、スティッキーフッターの行の高さは48ピクセルで、設定していませんでした。誰かが起こっていることを知っていますか？

表の画像

:: ng-deepを使用してフッター行のcssを編集できます。font-weightをboldに設定しましたが、高さ属性は何も起こりません。

::ng-deep tr.mat-footer-row {
border: 1px solid #e7e7e7;
font-weight: bold;
}
cssangularangular-material
3
Facundo Palavecino

あなたのstyles.scssに追加してみてください。

tr.mat-footer-row {
        border: 1px solid #e7e7e7;
        font-weight: bold;
        height: #px !important;
}
3
Bryyy

Mat-tableのデフォルト（48 px）で高さを変更するには、たとえば、行を定義するときに、htmlのすべての行のクラスを指定する必要があります。

<tr mat-row *matRowDef="let row; columns: displayedCol;" class="table-row"></tr>

次に、高さをオーバーライドして、メインのcssファイルでクラス 'table-row'を特定の高さに設定します。次に例を示します。

.table-row {
  height: 30px !important;
}

angular 7 and angular material version 7.3.7。

よろしく

4
Julian Salamanca

正常に動作します。

tr.mat-footer-row,
tr.mat-row {
  border: 1px solid #e7e7e7;
  font-weight: bold;
  height: 20px !important;
}
0
Acodewizard

素材5付き

 mat-row.mat-row.ng-star-inserted 
  { height: 32px !important; } 

.mat-row{ min-height: 30px; }
0
Laxmichand Dhuvare

関連する点として、マットテーブルの行が高すぎるという問題があり、CSSで高さを設定してそれを小さくしようとしました。

「min-height」が「mat-h​​eader-row」と「mat-row」に設定されていたことが原因であることが判明しました。

修正は簡単です：

.mat-header-row, .mat-row {
  min-height: 30px;
}
0
Dave C

テーブルフッターの高さはtr.mat-footer-rowで指定できます。

tr.mat-footer-row {
    height: 100px;
}

StackBlitzの例 https://stackblitz.com/angular/gjjjdpjqvvde?file=app%2Ftable-sticky-footer-example.css

0
Amrish Ashok