web-dev-qa-db-ja.com

編集Angularマテリアルのテーブルセルのパディング

開発者ツールで要素を検査すると、パディングがゼロになりますが、それを見てマウスを上に置くと、セル内に非常に明確にパディングがあります。私はこれがどこから来ているのかわからず、td { padding: 0 !important }は何もしません。

cssangularangular-material
9
yoursweater

知覚されるパディングは、display: table-cell;に設定されているmiddleと組み合わせて、デフォルトのブラウザー/ユーザーエージェントvertical-align: inherit;スタイルからの<td>およびtr.mat-row（通常は値height）によって引き起こされています。 CSSクラス<tr>の.mat-rowには、デフォルトで48pxの高さが設定されています。高さを調整するか、height: auto;に設定してから、必要に応じてtd.mat-cellにパディングを調整できます。これにより、開発者ツールを使用して検査するときに見える知覚されるパディングが効果的に削除されます。 <td>の検査時にChrome開発者ツールのようなものに見られる緑色のパディングの視覚化は、テーブルセルを備えた真ん中の垂直に配置された要素がツールに表示される方法です。その<td>のコンピュータープロパティを調べると、4辺すべてにゼロパディングがあることがわかります。

.mat-row {
  height: auto;
}

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

StackBlitz は、height: auto;のtr.mat-rowと、td.mat-cellのカスタムパディング値を示しています。

td.mat-cellのdisplayプロパティ値を変更しないことをお勧めしますが、inline-blockのようなheightを調整せずに効果を確認するには、mat-rowのようなものに変更できます。

うまくいけばそれが助けてくれます！

10
Alexander Staroselsky