关于CSS：为什么我无法对有angular的垫子表行应用边框？

Why am I unable to apply a border to an angular mat-table row?

我有一个简单的棱角材质表：

1
2
3
4
5
6
7
8
9
10
11
12

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

我想在行之间添加一些额外的边距以及边框，甚至可能添加一些填充。我发现我可以更改行的背景颜色，但是无法对行应用边距，填充或边框。

1
2
3
4
5
6
7
8
9
10
11

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>中。

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.

解决方案

如何为表行设置border并指定margin和padding取决于您使用的边框模型(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。解决方案：如果需要边框，边距和填充，可以执行以下操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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。解决方案：如果只需要行边框和填充，但行之间没有间距/边距，则可以执行以下操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

1
2
3

mat-footer-row, mat-header-row, mat-row {
border-bottom-width: 10px;
}

尝试此代码。这将起作用:)

最简单，更好的方法是利用角形材料的力量。
使用mat-table，mat-h??eader-cell，mat-cell代替table，th，td。最后使用mat-h??eader row和mat-row代替th和td。然后，您可以根据需要为每行加上边框。

实时示例：Stackblitz