How to add border radius to angular mat table?

Question

I am trying to make the mat-table border as round. But it is not working. Tried this-

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 1em;
}

How to achieve this?

Where did you write this code? – Dusan Radovanovic Mar 04 '20 at 12:12 — Dusan Radovanovic, Mar 04 '20 at 12:12
would be good if you provided also html that you use – mikus Mar 04 '20 at 14:14 — mikus, Mar 04 '20 at 14:14

score 13 · Answer 1 · answered Aug 17 '20 at 13:20

13

The most simple solution that worked for me was to hide the overflow of certain elements that gave the unfinished look when we set the border-radius. So, we just handle that

.mat-table{    
    border-radius: 8px;
    overflow:hidden !important;
}

Feel free to point out cases where this might cause other issues.

answered Aug 17 '20 at 13:20

Ashish poojary

139
1
4

It works, however if there's a border width, it doesn't show. – Felipe Morais Feb 18 '21 at 21:13
1

Works, but when you use stick header, this does not work. Because overflow:hidden effects the whole thing. – Bidisha Das Oct 16 '21 at 09:27

Eliseo · Accepted Answer · 2020-03-04T15:19:57.070

10

the problem is that you need over-ride the background-color of mat-table:

.mat-table
{
  background-color:transparent!important;  
}
table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 5em;
}
table tr:last-child td /*To remove the last border*/
{
  border-bottom:0 solid
}

stackblitz

edited Mar 04 '20 at 15:19

answered Mar 04 '20 at 14:24

Eliseo

50,109
4
29
67

Thanks, @Eliseo for the right direction. Doesn't know why I got downvote for the question and got wrong answers from others! :/ – Shofol Mar 05 '20 at 08:55
1

This doesn't work. If you add `border: 1px solid black;` it does not make the edges rounded. This solution doesn't have a visible border. – Ray May 04 '20 at 16:28
use `border-collapse:separate;` instead of `border-collapse: collapse;` – Eliseo May 04 '20 at 16:39

score 1 · Answer 3 · answered Jun 09 '21 at 23:27

Update:

@Eliseo answer works if you add border to mat-table: border: solid 1px grey;

    .mat-table
    {
      background-color:transparent!important;  
      border: solid 1px grey;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      border-radius: 5em;
    }
    table tr:last-child td /*To remove the last border*/
    {
      border-bottom:0 solid
    }

score 0 · Answer 4 · edited Aug 10 '22 at 14:55

0

This CSS code working in Mat table border Radius

CSS code for Mat table border radius

th.mat-header-cell:first-of-type, td.mat-cell:first-of-type, td.mat-footer-cell:first-of-type {
  padding-left: 24px;
  border-top-left-radius: 9px;
}
th.mat-header-cell:last-of-type, td.mat-cell:last-of-type, td.mat-footer-cell:last-of-type {
  padding-right: 24px;
  border-top-right-radius: 9px;
}

edited Aug 10 '22 at 14:55

JON

965
2
10
28

answered Aug 04 '22 at 06:31

Naveenkumar Paramasivam

1
2

for apply the same style of your picture is sufficen use th.mat-header-cell:first-of-type { border-top-left-radius: 9px; } and th.mat-header-cell:last-of-type{ border-top-right-radius: 9px; } – Kemot 90 Dec 16 '22 at 13:56

score -1 · Answer 5 · answered Mar 04 '20 at 12:16

-1

If you want it in whole application just add it in you main css with !important like following

.mat-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-radius: 1em !important;
}

or if this doesnt works there is another way to use /deep/ Or ::deep

although it is not best practice and is also deprecated but solves the purpose

answered Mar 04 '20 at 12:16

Sushrut Singh Sisodiya

942
6
11

I think it is a better practice to create a class for the mat-table in style.css (it will be available for the whole application), and second, if the CSS selectors were well formed there's no need for !important or ::deep. Those are kinda hacky. – Felipe Morais Feb 18 '21 at 21:17

score -1 · Answer 6 · edited Jun 20 '20 at 09:12

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 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).

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).

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

score -1 · Answer 7 · answered Dec 26 '22 at 22:34

-1

simply add this to your css file: 

table, th, td { border-radius: 10px; }

simply add this to your css file:

table, th, td { border-radius: 10px; }

answered Dec 26 '22 at 22:34

Daniel Guedes

1

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/33500492) – Julia Dec 30 '22 at 22:19

score -1 · Answer 8 · edited May 31 '23 at 10:23

-1

thead,
tr,
th {
    border-radius: 8px;
}
tbody {
    tr:last-child {
        td {
            border-radius: 8px;
        }
    }
}

edited May 31 '23 at 10:23

Brian Tompsett - 汤莱恩

5,753
72
57
129

answered May 31 '23 at 09:23

Hedieh Rafiee

1

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/34475297) – Wahlstrommm Jun 06 '23 at 17:38

How to add border radius to angular mat table?

8 Answers8

Linked