为什么我无法对有角度的垫子桌子行应用边框？

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

      
      

    
 Name 
      
 {{element.name}} 
    
    
 Total Score 
      
 {{element.totalScore}}
    
    

    

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

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到表行。

margin适用于除表显示类型为table-caption，table和inline-table之外的其他元素。

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

解决方案

如何border为表格行设置a 并指定a margin和padding取决于您使用的边框模型（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;
} 

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