如何在 Angular Material 13 中的页眉和正文 table 之间添加 space？

Question

如何在 angular material table 中的页眉和正文之间添加 space（边距）？

我一开始用 this solution 试过，但没用。

演示：https://stackblitz.com/edit/angular-ivy-anphrw?file=src/app/app.component.html

Answer 1

尝试添加此样式：

th {
    padding-bottom: 50px !important;
}

Answer 2

你所看到的here可以工作。

您必须添加修饰符才能将样式应用到 material 元素，例如 :host 和 ::ng-deep。

那别忘了玩弄line-height属性修改header和body之间的space。

这可能会引起争议，因为假设将来会弃用并且与 !important 相似，但它运作良好，虽然您知道自己在做什么，但在我看来使用它们并不是一件坏事。

我有 forked 你的带有修饰符的 stackblitz 项目。

here 是一门针对这些修饰符的课程，旨在了解如何以及何时使用它们。

Answer 3

你需要在style.css

中写下你的css

tbody:before {
  content: '0C';
  display: block;
  line-height: 5rem;
  text-indent: -99999px;
}

Answer 4

尝试在您的 css 中像这样为您的广告添加高度：

thead {
  height: 120px;
 }

Answer 5

table thead {
  border-bottom: 15px solid transparent;
}