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

Issue

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

Solution

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.

Answered By - Alexis

Answer Checked By - Robin (PHPFixing Admin)