Comment donner une hauteur fixe à Angular Table des matériaux

Question

J'ai un angular material table(10 rows)for pour lequel je veux fixer la taille à 300px (le défilement vertical devrait être utilisé pour voir les lignes supplémentaires). Quand je donne la hauteur dans les styles à 300px, cela n’a aucun effet. Le contenu de la table sort de la hauteur indiquée.

Voir le lien pour l'image.

Je veux avoir deux tables l'une en dessous de l'autre et je veux leur donner la même height 50%. La première table elle-même prenant 10 rows height.

Angular Table des matières

Answer 1

J'utilise un div wrapper avec classe

<div class="table-container">
   <table mat-table [dataSource]=.....>
   </table>
</div>

et c'est la classe

.table-container {
  margin-top: 10px;
  max-height: 300px;
  overflow: auto;
}

Answer 2

Essayez celui-ci dans le fichier css

table tr.mat-row {
  height: 300px;
}