Editing Angular Material's Table Cell Padding

Editing Angular Material's Table Cell Padding

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.

How to get gap between tr in angular material table

Try this way:

   .mat-row {
     height: auto;
  }

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

Increase gap between mat rows in mat-table angular

Use the below css.

.mat-table {
    overflow-x: scroll;
    max-width: 99%;
  }
  
  .mat-cell,
  .mat-header-cell {
    word-wrap: initial;
    display: table-cell;
    padding: 0px 10px;
    line-break: unset;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
  }
  
  .mat-row,
  .mat-header-row {
    display: table-row;
  }

angular table , cell with

You can add a class to set the padding zero to your mat-cell element something like

<mat-cell *matCellDef="let model"  class="p-0">

then in css

.p-0 {
  padding: 0 !important;
}

Working demo

How to set width of mat-table column in angular?

using css we can adjust specific column width which i put in below code.

user.component.css

table{
 width: 100%;
}

.mat-column-username {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 28% !important;
  width: 28% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.mat-column-emailid {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 25% !important;
  width: 25% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.mat-column-contactno {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 17% !important;
  width: 17% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.mat-column-userimage {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 8% !important;
  width: 8% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.mat-column-userActivity {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 10% !important;
  width: 10% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

Why am I unable to apply a border to an angular mat-table row?

Your styling problems don't have to do with Angular Material tables but with HTML tables in general. If you search for how to style a table e.g. add borders to rows or margins you'll find various answers and suggestions.

You basically can't add margin or padding to a table row <tr> directly.

margin applies to all elements except elements with table display types other than table-caption, table and inline-table.

padding applies to all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group
and table-column.

Solutions

How you set a border for table rows and specify a margin and padding depends on the border model (collapse or separate) you use.

The separated borders model: border-collapse: seperate

In the separated borders model, the edges coincide with
the border edges of cells. (And thus, in this model, there may be gaps
between the rows, columns, row groups or column groups, corresponding
to the 'border-spacing' property.)

In this model, each cell has an individual border. The
'border-spacing' property specifies the distance between the borders
of adjoining cells. (...) Rows, columns, row groups, and column groups
cannot have borders (i.e., user agents must ignore the border
properties for those elements).

1. Solution: If you want a border, margin and padding you could do something like this:

td.mat-cell {
 /* row padding */
 padding: 16px 0;
 /* row border */
 border-bottom: 1px solid #ffa600;
 border-top: 1px solid #ffa600;
}

td.mat-cell:first-child {
  /* row border */
  border-left: 1px solid #ffa600;
}

td.mat-cell:last-child {
  /* row border */
  border-right: 1px solid #ffa600;
}

table {
  /* row spacing / margin */
  border-spacing: 0 8px !important;
} 

https://stackblitz.com/edit/angular-cjxcgt-wtkfg4

The collapsing border model: border-collapse: collapse

The edges of the rows, columns, row groups and column groups in the
collapsing borders model coincide with the hypothetical grid lines on
which the borders of the cells are centered. (And thus, in this model,
the rows together exactly cover the table, leaving no gaps; ditto for
the columns.)

In the collapsing border model, it is possible to specify borders that
surround all or part of a cell, row, row group, column, and column
group. (...) Also, in this model, a table does not have padding (but does have margins).

2. Solution: If you only want a row border and padding but no spacing / margin between the rows you could do:

table {
  border-collapse: collapse;
}

th {
  /* row border */
  border-bottom: 1px solid #ffa600;
}

td.mat-cell {
  /* row padding */
  padding: 20px 0;
  border: none;
}

tr.mat-row {
  /* row border */
  border: 1px solid #ffa600;
}

https://stackblitz.com/edit/angular-cjxcgt-xphbue

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

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.

Is there a way to overwrite spacing for expandable rows in Angular Material tables?

I have found a workaround now:
remove the border-spacing and insert an empty spacer-row with a fixed height before each row instead:

<ng-container matColumnDef="spacerColumn">
  <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length"></td>
</ng-container>

<tr mat-row *matRowDef="let element; columns: ['spacerColumn']" class="spacer"></tr>

.spacer {
  height: 8px;
} 

Also see https://stackblitz.com/edit/angular-24aegb-r9xpvh

Align right one mat-header-cell in a angular material table with sort headers

Live demo

.header-align-right{
  display: flex;
  padding: 21px 0;
  justify-content: flex-end;
}

---

Related Topics