CODEWITHSUNDEEP
htmlangular
Shivani
Shivani

Reputation: 301

How to apply border radius and spacing between the mat-rows?

Here is my code https://stackblitz.com/edit/angular-vodqhe

I'm trying to make the rows appear as shown in the pictureenter image description here

Upvotes: 1

Views: 2313

Answers (1)

Storytellerr
Storytellerr

Reputation: 819

as per the MDN documentation:

[The margin property] applies to all elements except elements with table display types other than table-caption, table and inline-table You basically can't add margin or padding to a table row directly.

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

separate

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

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

as in your code border model is separate so you should use these set of css

table {
  width: 100%;
  border-spacing: 0 8px !important;
}

td.mat-cell {
 padding: 16px 0 16px 0;
 border-bottom: 2px solid #ffa600;
 border-top: 2px solid #ffa600;
}

td.mat-cell:first-child {
  border-left: 2px solid #ffa600;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
}

td.mat-cell:last-child {
  border-right: 2px solid #ffa600;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}

i have created a stackblitz for you.

Upvotes: 1

Related Questions