为什么我无法将边框应用于有角度的垫表行？

Question

我有一个简单的角材料表：

 <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 表上都不允许填充和边距。边界仍然躲避我。

原文由 Rob 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的样式问题与 Angular Material 表无关，但通常与 HTML 表有关。如果您搜索如何设置 table 例如为行或边距添加边框，您会找到各种答案和建议。

您基本上不能直接将 margin 或 padding 添加到表格行 <tr> 中。

margin 适用于除 table-caption 、 table 和 inline-table 以外的表格显示类型的元素之外的所有元素。

padding 适用于除 table-row-group 、 table-header-group 、 table-footer-group 、 table-row 、 table-column-group 和 table-column 之外的所有元素。

解决方案

How you set a border for table rows and specify a margin and padding depends on the border model ( collapse or separate ) 你使用。

分离边框模型： border-collapse: seperate

在 分离边界模型 中，边缘与单元格的边界边缘重合。 （因此，在此模型中，行、列、行组或列组之间可能存在间隙，对应于 ‘border-spacing’ 属性。）

在此模型中，每个单元格都有单独的边框。 ‘border-spacing’ 属性指定相邻单元格的边界之间的距离。 (…) 行、列、行组和列组不能有边框（即，用户代理必须忽略这些元素的边框属性）。

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

折叠边界模型 中的行、列、行组和列组的边缘与单元格边界居中的假设网格线重合。 （因此，在这个模型中，行一起完全覆盖了表格，不留空隙；列也是如此。）

在折叠边框模型中，可以指定围绕单元格、行、行组、列和列组的全部或部分的边框。 (…) 此外，在此模型中，表格没有填充（但有边距）。

2. 解决方案： 如果您只想要行 边框 和 填充，但行之间没有间距/边距，您可以这样做：

 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

原文由 frido 发布，翻译遵循 CC BY-SA 4.0 许可协议