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

时间:2018-12-28 06:35:59

标签: css angular angular-material angular-material-table

我有一个简单的棱角材料表:

<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表上都不允许填充和边距。边界仍然使我难以捉摸。

3 个答案:

答案 0 :(得分:2)

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

如果需要边框,边距和填充,可以执行以下操作:

td.mat-cell {
 /* row padding */
 padding: 16px 0 16px 0;
 /* row border */
 border-bottom: 1px solid #FAFF00;
 border-top: 1px solid #FAFF00;
}

td.mat-cell:first-child {
  /* row border */
  border-left: 1px solid #FAFF00;
}

td.mat-cell:last-child {
  /* row border */
  border-right: 1px solid #FAFF00;
}

table {
  /* row spacing / margin */
  border-spacing: 0 8px !important;
} 

如果只需要行边框,但行之间没有间距/边距,则可以:

table {
  border-collapse: collapse;
}

tr.mat-row {
  border: 1px solid #FAFF00;
}

td.mat-cell {
  border: none;
}

您可以看到有多种方法。我使用第一种方法创建了这个stackblitz。 https://stackblitz.com/edit/angular-cjxcgt-teiuyh

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

实时示例:Stackblitz