为什么我无法将边框应用于 angular mat-table 行？
Why am I unable to apply a border to an angular mat-table row?
我有一个简单的angular materialtable:
<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 table 上都不允许填充和边距。边界仍然让我望而却步。
您的样式问题与 Angular Material table 无关，但通常与 HTML table 有关。如果您搜索如何设置 table 的样式，例如为行或边距添加边框，您会找到各种答案和建议。
您基本上不能将 margin 或 padding 直接添加到 table 行 <tr>。
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.
解决方案
如何为 table 行设置 border 并指定 margin 和 padding 取决于 border model（collapse 或separate) 你用。
分隔边框模型：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.解决方案： 如果你想要 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
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。解决方案： 如果你只想要一行 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;
}
试试这个代码。这会起作用:)
最简单和更好的方法是利用angular material的力量。
使用 mat-table、mat-header-cell、mat-cell 代替 table、th、td。最后使用 mat-header row 和 mat-row 代替 th 和 td。然后你可以根据需要给每一行加边框。
实例：Stackblitz
我有一个简单的angular materialtable:
<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 table 上都不允许填充和边距。边界仍然让我望而却步。
您的样式问题与 Angular Material table 无关，但通常与 HTML table 有关。如果您搜索如何设置 table 的样式，例如为行或边距添加边框，您会找到各种答案和建议。
您基本上不能将 margin 或 padding 直接添加到 table 行 <tr>。
marginapplies to all elements except elements with table display types other than table-caption, table and inline-table.
paddingapplies to all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.
解决方案
如何为 table 行设置 border 并指定 margin 和 padding 取决于 border model（collapse 或separate) 你用。
分隔边框模型：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.解决方案： 如果你想要 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
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。解决方案： 如果你只想要一行 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;
}
试试这个代码。这会起作用:)
最简单和更好的方法是利用angular material的力量。 使用 mat-table、mat-header-cell、mat-cell 代替 table、th、td。最后使用 mat-header row 和 mat-row 代替 th 和 td。然后你可以根据需要给每一行加边框。
实例：Stackblitz