Édition Angular Padding des cellules du tableau du matériau

Question

Lorsque j'inspecte l'élément avec des outils de développement, il n'affiche aucun remplissage, mais lorsque je le regarde et que je le souris, il a très clairement un remplissage dans la cellule. Je n'ai aucune idée d'où cela vient, et la configuration de td { padding: 0 !important } ne fait rien.

Answer 1

Le rembourrage perçu est causé par display: table-cell; et vertical-align: inherit; (qui est généralement la valeur middle) du navigateur/agent utilisateur par défaut <td> styles en combinaison avec un height défini sur le tr.mat-row. Le <tr> avec la classe CSS .mat-row a une hauteur définie par défaut de 48px. Vous pouvez régler la hauteur ou définir sur height: auto; puis ajustez le rembourrage à td.mat-cell comme requis. Cela supprime efficacement le remplissage perçu qui est visible lors de l'inspection avec les outils de développement. La visualisation du remplissage vert vue dans quelque chose comme Chrome outils de développement lors de l'inspection du <td> est la façon dont un élément central aligné verticalement avec une cellule de tableau est affiché dans les outils. Si vous examinez les propriétés de l'ordinateur de ce <td> vous verrez qu'il n'a aucun rembourrage sur les quatre côtés.

.mat-row {
  height: auto;
}

.mat-cell {
  padding: 8px 8px 8px 0;
}

Voici un StackBlitz montrant le height: auto; sur tr.mat-row ainsi qu'une valeur de remplissage personnalisée sur td.mat-cell en action.

Bien que je recommande d'éviter de modifier la valeur de la propriété display sur td.mat-cell, vous pouvez le changer en quelque chose comme inline-block pour voir les effets sans aucun ajustement de height de mat-row.

J'espère que cela aide!