32

When I inspect the element with developer tools it shows zero padding, but when I look a it and mouse over it, it very clearly has padding within the cell. I have no idea where this is coming from, and setting td { padding: 0 !important } does nothing.

Willi Mentzel
  • 27,862
  • 20
  • 113
  • 121
yoursweater
  • 1,883
  • 3
  • 19
  • 41

1 Answers1

68

The perceived padding is being caused by display: table-cell; and vertical-align: inherit; (which usually is value middle) from the default browser/user-agent <td> styles in combination with a height being set on the tr.mat-row. The <tr> with CSS class .mat-row has a set height by default of 48px. You can adjust the height or set to height: auto; then adjust padding to the td.mat-cell as needed. This effectively removes the perceived padding that is visible when inspecting with developer tools. The green padding visualization seen in something like Chrome developer tools when inspecting the <td> is how just a middle vertically aligned element with table-cell is displayed in the tools. If you examine the Computer properties of that <td> you'll see it has zero padding on all four sides.

.mat-row {
  height: auto;
}

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

Here is a StackBlitz showing the height: auto; on tr.mat-row as well as a custom padding value on td.mat-cell in action.

While I'd recommend to avoid changing the display property value on td.mat-cell, you can change it to something like inline-block to see the effects without any adjustments to height of mat-row.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Alexander Staroselsky
  • 37,209
  • 15
  • 79
  • 91
  • 1
    This only works for me with `!important` on the padding, as the code for the mat-table is apparently written directly into a ` – Steve Dec 14 '18 at 14:31
  • @Steve, it would depend on where you put your styles. If you use `styleUrls`, as the example in the answer does, component CSS styles are [encapsulated](https://angular.io/guide/component-styles#view-encapsulation) in the component's view and don't require the !important tag as selectors such as `table[_ngcontent-c6]` are created. If you are using global CSS, you may have to increase specificity or use !important as you mentioned. – Alexander Staroselsky Dec 14 '18 at 14:53
  • Yes, we are trying to avoid component styles and have a global css file for people using Angular Material (as most of our company uses Bootstrap). – Steve Dec 14 '18 at 18:35