css - 为什么我无法将边框应用于 Angular 垫表行？

Question

我有一个简单的 Angular Material 表:

<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 表格都不允许填充和边距。边界仍然让我望而却步。

Answer 1

您的样式问题与 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取决于 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。解决方案: 如果您想要边框、边距 和填充，您可以这样做:

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

https://stackblitz.com/edit/angular-cjxcgt-xphbue