編輯 Angular Material 的表格單元格填充

Question

當我使用開發人員工具檢查元素時，它顯示零填充，但是當我查看它並將鼠標懸停在它上面時，它非常清楚地在單元格中有填充。 我不知道這是從哪里來的，設置td { padding: 0 !important }沒有任何作用。

Answer 1

感知到的填充是由display: table-cell;引起的display: table-cell; 和vertical-align: inherit; （通常是值middle ）來自默認瀏覽器/用戶代理<td>樣式以及在tr.mat-row上設置的height 。 帶有 CSS 類.mat-row的<tr>默認設置高度為48px 。 您可以調整高度或設置為height: auto; 然后根據需要調整填充到td.mat-cell 。 這有效地消除了使用開發人員工具進行檢查時可見的感知填充。 檢查<td>時，在 Chrome 開發人員工具中看到的綠色填充可視化是如何在工具中顯示帶有表格單元格的中間垂直對齊元素。 如果您檢查該<td>的計算機屬性，您會看到它的四個邊都填充了零。

.mat-row {
  height: auto;
}

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

這是一個顯示height: auto;的StackBlitz height: auto; 在tr.mat-row上以及在td.mat-cell上的自定義填充值td.mat-cell 。

雖然我建議避免更改td.mat-cell上的display屬性值，但您可以將其更改為inline-block以查看效果，而無需對mat-row height進行任何調整。