为什么我无法将边框应用于有角度的 mat-table 行? [英] Why am I unable to apply a border to an angular mat-table row?

问题描述

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

<ng-container matColumnDef="name"><th mat-h​​eader-cell *matHeaderCellDef>名称</th><td mat-cell *matCellDef="let element">{{element.name}} </td></ng-容器><ng-container matColumnDef="totalScore"><th mat-h​​eader-cell *matHeaderCellDef>总分<td mat-cell *matCellDef="let element">{{element.totalScore}}</td></ng-容器><tr mat-h​​eader-row *matHeaderRowDef="displayedColumns"></tr><tr mat-row *matRowDef="let row; columns:displayedColumns;"></tr>

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

tr.mat-row {背景:#2f5b98；/* 旧浏览器 */背景:-moz-linear-gradient(top, rgba(74,144,239,1) 20%, rgba(0,0,0,1) 100%);/* FF3.6-15 */背景:-webkit-linear-gradient(top, rgba(74,144,239,1) 20%,rgba(0,0,0,1) 100%);/* Chrome10-25,Safari5.1-6 */背景:线性梯度(到底部，rgba(74,144,239,1) 20%,rgba(0,0,0,1) 100%)；/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */过滤器:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a90ef', endColorstr='#000000',GradientType=0 );/* IE6-9 */边距顶部:16px；填充:8px；边框:1px 实心 #FAFF00；}

我确定这很简单，但我无法弄清楚是什么阻止了我将这些样式应用于行.同样，我可以更改背景、其中的字体和其他几种样式，但不能更改这三种特定样式(内边距、边距、边框).

我已经确定在任何 html 表上都不允许填充和边距.尽管如此，Border 仍然让我望而却步.

解决方案

您的样式问题与 Angular Material 表格无关，而是与一般的 HTML 表格有关.如果您搜索如何设置 table 的样式，例如为行或边距添加边框，您会发现各种答案和建议.

你基本上不能直接将margin或padding添加到表格行.

<块引用>

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

<块引用>

填充 适用于除table-row-group、table-header-group、table-footer-group、之外的所有元素表行、表列组和表列.

解决方案

如何为表格行设置 border 并指定 margin 和 padding 取决于 边框模型(collapse 或 separate).

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

<块引用>

在分离边框模型中，边缘与单元格的边界边缘.(因此，在这个模型中，可能存在差距行、列、行组或列组之间，对应到边框间距"属性.)

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

1.解决方案:如果您想要边框、边距和填充，您可以这样做:

td.mat-cell {/* 行填充 */填充:16px 0;/* 行边框 */边框底部:1px 实心 #ffa600;边框顶部:1px 实心 #ffa600;}td.mat-cell:第一个孩子{/* 行边框 */左边框:1px 实心 #ffa600;}td.mat-cell:last-child {/* 行边框 */右边框:1px 实心 #ffa600;}桌子 {/* 行间距/边距 */边框间距:0 8px ！重要；}

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

折叠边框模型:border-collapse:collapse

<块引用>

行、列、行组和列组的边缘折叠边框模型与上的假设网格线重合单元格的边界居中.(因此，在这个模型中，排在一起正好覆盖了桌子，不留空隙；同上列.)

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

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

table {边框折叠:折叠；}第 {/* 行边框 */边框底部:1px 实心 #ffa600;}td.mat-cell {/* 行填充 */填充:20px 0;边界:无；}tr.mat-row {/* 行边框 */边框:1px 实心 #ffa600;}

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

I have a simple 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>

I would like to add some extra margin between the rows as well as a border and maybe even some padding. I have found that I am able to change the background color of the rows, but I'm not able to apply margins, padding or borders to the row.

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

I'm sure it's something simple, but I can't figure out what is preventing me from applying these styles to the row. Again, I can change the background, the font within it and several other styles, just not these three particular styles (padding, margin, border).

EDIT: I have since determined that padding and margin are not allowed on any html tables. Border still eludes me though.

解决方案

Your styling problems don't have to do with Angular Material tables but with HTML tables in general. If you search for how to style a table e.g. add borders to rows or margins you'll find various answers and suggestions.

You basically can't add margin or padding to a table row <tr> directly.

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.

Solutions

How you set a border for table rows and specify a margin and padding depends on the border model (collapse or separate) you use.

The separated borders model: 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. Solution: If you want a border, margin and padding you could do something like this:

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

The collapsing border model: 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. Solution: If you only want a row border and padding but no spacing / margin between the rows you could do:

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

这篇关于为什么我无法将边框应用于有角度的 mat-table 行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！