How to add space between header and body table in Angular Material 13?

Question

How can I add space(margin) between header and body in a angular material table?

I tried at first with this solution but it didn't work.

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

Answer 1

What you have seen here can work.

You must add modifiers in order to apply the style to material elements such as :host and ::ng-deep.

Then don't forget to play with the line-height attribute to modify the space between header and body.

This can be controversial because of supposed future deprecation and similarity with !important but it works well, and while you know what you do, it's not a bad thing to use them in my opinion.

I have forked your stackblitz project with the modifiers.

And here is a course for those modifiers, to understand how and when to use them.

Answer 2

You need to write your css in style.css

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

Answer 3

Try adding this style:

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

Answer 4

Try to add an height to your thead like this in your css :

thead {
  height: 120px;
 }

Answer 5

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