CODEWITHSUNDEEP
angularangular-materialmat-table
Shofol
Shofol

Reputation: 733

How to add border radius to angular mat table?

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?

Upvotes: 12

Views: 25323

Answers (9)

okan
okan

Reputation: 934

Here's a solution that works:

To add rounded corners to an Angular Material table (mat-table), you need to ensure that the table's parent container or the table itself doesn't have conflicting styles (e.g., border-collapse or background-color settings).

.mat-mdc-table {
  background-color: unset !important; /* Ensures the background doesn't conflict */
  border-radius: 16px !important;    /* Adds the desired rounded corners */
}

Additional Note:

If the table content (like rows or cells) still doesn't respect the border radius (e.g., spilling out of the rounded edges), consider adding the following styles to adjust the overflow:

.mat-mdc-table {
  overflow: hidden; /* Ensures content stays within the rounded borders */
}

Upvotes: 0

Hedieh Rafiee
Hedieh Rafiee

Reputation: 77

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

Upvotes: -1

Daniel Guedes
Daniel Guedes

Reputation: 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; }

Upvotes: -1

Naveenkumar Paramasivam
Naveenkumar Paramasivam

Reputation: 1

This CSS code working in Mat table border Radius

CSS code for Mat table border radius enter image description here

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;
}

Upvotes: 0

SazLamas
SazLamas

Reputation: 45

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
    }

Upvotes: 1

Ashish poojary
Ashish poojary

Reputation: 157

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.

Upvotes: 14

Eliseo
Eliseo

Reputation: 58019

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

Upvotes: 9

Sanjay Lohar
Sanjay Lohar

Reputation: 528

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

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

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

Upvotes: -1

Sushrut Singh Sisodiya
Sushrut Singh Sisodiya

Reputation: 1000

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

Upvotes: -1

Related Questions