I have a simple angular material table:
<table mat-table [dataSource]="scoreboardData">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="totalScore">
<th mat-header-cell *matHeaderCellDef> Total Score </th>
<td mat-cell *matCellDef="let element"> {{element.totalScore}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
I would like to add some extra margin between the rows as well as a border and maybe even some padding. I have found that I am able to change the background color of the rows, but I'm not able to apply margins, padding or borders to the row.
tr.mat-row {
background: #2f5b98; /* Old browsers */
background: -moz-linear-gradient(top, rgba(74,144,239,1) 20%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(74,144,239,1) 20%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(74,144,239,1) 20%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a90ef', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
margin-top: 16px;
padding: 8px;
border: 1px solid #FAFF00;
}
I'm sure it's something simple, but I can't figure out what is preventing me from applying these styles to the row. Again, I can change the background, the font within it and several other styles, just not these three particular styles (padding, margin, border).
EDIT: I have since determined that padding and margin are not allowed on any html tables. Border still eludes me though.
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
mat-footer-row, mat-header-row, mat-row {
border-bottom-width: 10px;
}
try this code. This will work :)
The simplest and better way is to utilize the power of angular material.
Use mat-table, mat-header-cell, mat-cell instead of table, th, td. At the end use mat-header row and mat-row instead of th and td. Then you can border each row as you want.
Live Example: Stackblitz
