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

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

htmlcssangularhtml-table


Solution 1:[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.

Solution 2:[2]

You need to write your css in style.css

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

example

Solution 3:[3]

Try adding this style:

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

Solution 4:[4]

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

thead {
  height: 120px;
 }

Solution 5:[5]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Bansi29
Solution 3 vals
Solution 4 Ethan0079
Solution 5 sweetnandha cse

Related Questions