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.
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.
By default, the MatTableDataSource sorts with the assumption that the sorted column's name matches the data property name that the column displays. For example, the following column definition is named position , which matches the name of the property displayed in the row cell.
mat-footer-row, mat-header-row, mat-row {
border-bottom-width: 10px;
}
try this code. This will work :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With