logo标签列表

编辑Angular Material表格单元格填充

cssangularangular-material
32

当我使用开发人员工具检查元素时，它显示填充为零，但是当我查看该元素并将鼠标悬停在上面时，很明显单元格内有填充。我不知道这是从哪里来的，而设置td { padding: 0 !important }无效。

1个回答
70

所感知到的填充是由display: table-cell; 和 vertical-align: inherit; (通常值为middle)，与默认浏览器/用户代理样式中 <td> 结合使用时，针对 tr.mat-row 设置了 height 所引起的。带有 CSS 类 .mat-row 的 <tr> 默认高度为 48px。您可以调整高度或设置为 height: auto; 然后根据需要调整 td.mat-cell 的填充。这有效地消除了使用开发人员工具检查时可见的感知填充。在类似 Chrome 开发人员工具中检查 <td> 时看到的绿色填充可视化是仅显示具有表格单元格的中间垂直对齐元素的工具。如果您检查该 <td> 的计算机属性，则会看到它的四个边都没有填充。

.mat-row {
  height: auto;
}

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

这里有一个StackBlitz演示 tr.mat-row 上的height: auto;以及在td.mat-cell上使用自定义填充值的效果。

虽然我建议不要更改td.mat-cell上的display属性值，但您可以将其更改为类似于inline-block的东西，以查看没有对mat-row的height进行任何调整的影响。

1
只有在填充的!important上才能为我正常工作，因为mat-table的代码显然是直接编写到<style>块中的。 - Steve
@Steve，这取决于您放置样式的位置。如果您使用styleUrls，就像答案中的示例一样，组件CSS样式会封装在组件的视图中，并且不需要!important标签，因为会创建选择器，例如table[_ngcontent-c6]。如果您正在使用全局CSS，则可能需要增加特定性或使用!important，就像您提到的那样。 - Alexander Staroselsky
是的，我们正在尝试避免组件样式，并为使用Angular Material的人提供全局CSS文件（因为我们公司大多数人使用Bootstrap）。 - Steve
在 Angular Material v15 及更高版本中，这些类名已更改为 mat-mdc-row 和 mat-mdc-cell。 - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接