我有一个简单的角材料表:
<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>
我想在行之间添加一些额外的边距以及边框,甚至可能添加一些填充。我发现我可以更改行的背景颜色,但无法对行应用边距、填充或边框。
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;
}
我确信这很简单,但我无法弄清楚是什么阻止我将这些样式应用到该行。同样,我可以更改背景、其中的字体和其他几种样式,但不能更改这三种特定样式(填充、边距、边框)。
编辑:我已经确定任何 html 表格都不允许使用填充和边距。但边界仍然让我困惑。
您的样式问题与 Angular Material 表格无关,而与一般的 HTML 表格有关。如果您搜索如何设计
table
的样式,例如向行或边距添加边框,您会找到各种答案和建议。
您基本上无法直接将
margin
或 padding
添加到表格行 <tr>
。
适用于除 table-caption、table 和 inline-table 之外的表格显示类型的元素之外的所有元素。margin
适用于除 table-row-group、table-header-group、table-footer-group、table-row、table-column-group 之外的所有元素 和表格列。padding
如何为表格行设置
border
以及指定 margin
和 padding
取决于您使用的 border model(collapse
或 separate
)。
border-collapse: seperate
在分离边界模型中,边缘与 单元格的边界。 (因此,在这个模型中,可能存在间隙 行、列、行组或列组之间,对应 到“边框间距”属性。)
在此模型中,每个单元格都有单独的边框。这 'border-spacing' 属性指定边框之间的距离 的相邻单元格。 (...) 行、列、行组和列组 不能有边界(即用户代理必须忽略边界 这些元素的属性)。
1。解决方案:如果你想要border,margin和padding,你可以这样做:
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
border-collapse: collapse
行、列、行组、列组的边缘 折叠边界模型与假设的网格线一致 单元格的边界居中。 (因此,在这个模型中, 行一起完全覆盖桌子,不留任何间隙;同上 列。)
在折叠边框模型中,可以指定以下边框: 包围单元格、行、行组、列和列的全部或部分 团体。 (...)此外,在此模型中,表格没有填充(但有边距)。
2。解决方案:如果您只想要一行border和padding,但行之间没有间距/边距,您可以这样做:
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;
}
mat-footer-row, mat-header-row, mat-row {
border-bottom-width: 10px;
}
尝试这个代码。这会起作用:)
.mat-cell {
padding: 16px 0;
border-top: 1px solid rgb(97 82 82);
border-right: 1px solid rgb(97 82 82);
}
.mat-cell:first-child {
border-left: 1px solid rgb(97 82 82);
}
.mat-row:first-child {
border-left: 1px solid rgb(97 82 82);
}
.mat-row:last-child {
border-bottom: 1px solid rgb(97 82 82);
}
.mat-column {
border-right: 1px solid rgb(97 82 82);
}
.mat-column:first-child {
border-left: 1px solid rgb(97 82 82);
}
.mat-header-cell:first-child {
border-left: 1px solid rgb(97 82 82);
}
.mat-header-cell {
border-right: 1px solid rgb(97 82 82);
border-top: 1px solid rgb(97 82 82);
}
table {
border-spacing: 0 8px !important;
}
最简单、更好的方法是利用有角材料的力量。 使用 mat-table、mat-header-cell、mat-cell 代替 table、th、td。最后使用 mat-header row 和 mat-row 而不是 th 和 td。然后你可以根据需要为每一行加边框。
实例:Stackblitz