css - 为什么我无法将边框应用于有角度的垫表行?
问题描述
我有一个简单的角材料表:
<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 表上都不允许填充和边距。边界仍然躲避我。
解决方案
您的样式问题与 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 之外的所有元素。
解决方案
如何border
为表格行设置 a 并指定 amargin
和padding
取决于您使用的边框模型(collapse
或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;
}
推荐阅读
- flutter - 如何将异步错误记录到控制台而不是在颤动中显示 ErrorWidget?
- java - 如何将转义的 [aabb] 传递给 java 中的 replaceAll() 方法?
- django - 在 djangocms-picture 如何设置默认的最大图像尺寸?
- angular - 世界地图未显示 - Angular Highcharts
- node.js - 运行 Yarn 时缺少权限
- sql - 通过 informatica 执行多个 select 语句并为每个 select 查询生成提取文件
- c# - 如何在 .net 中的 wwwroot 内的多个文件夹中提供 html 文件
- javascript - 选择选项 x 次时从下拉列表中禁用选项
- python - python ValueError: Series 的真值不明确。试图检查日期时间
- java - android.widget.AbsListView$RecycleBin.getScrapView NullPointerException:尝试获取空数组的长度