作者:碧后珍重 | 来源:互联网 | 2022-11-23 15:00
我有一个简单的角度材质表:
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表上都不允许填充和边距。边界仍然使我困惑。
1> fridoo..:
您的样式问题与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;
}
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
推荐阅读
-
文章目录简介HTTP请求过程HTTP状态码含义HTTP头部信息Cookie状态管理HTTP请求方式简介HTTP协议(超文本传输协议)是用于从WWW服务 ...
[详细]
蜡笔小新 2023-10-15 14:59:43
-
本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ...
[详细]
蜡笔小新 2023-12-13 12:14:55
-
-
本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ...
[详细]
蜡笔小新 2023-12-14 12:05:06
-
本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤,可以获取到网站首页的新闻数据。代码示例使用Python编写,并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ...
[详细]
蜡笔小新 2023-12-12 19:16:21
-
导出功能protectedvoidbtnExport(objectsender,EventArgse){用来打开下载窗口stringfileName中 ...
[详细]
蜡笔小新 2023-12-12 14:34:29
-
Imnotunderstandingastowhythetrianglewhichappearswhenthemousehoversoverthemenuitem, ...
[详细]
蜡笔小新 2023-10-16 11:26:13
-
最近在学Python,看了不少资料、视频,对爬虫比较感兴趣,爬过了网页文字、图片、视频。文字就不说了直接从网页上去根据标签分离出来就好了。图片和视频则需要在获取到相应的链接之后取做下载。以下是图片和视 ...
[详细]
蜡笔小新 2023-10-15 09:28:43
-
博主使用代理IP来自于网上免费提供高匿IP的这个网站用到的库frombs4importBeautifulSoupimportrandomimporturllib.re ...
[详细]
蜡笔小新 2023-10-13 18:52:58
-
这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ...
[详细]
蜡笔小新 2023-12-14 16:19:10
-
本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法,包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ...
[详细]
蜡笔小新 2023-12-10 20:09:23
-
本文介绍了一个超级简单的加解密工具的方案和功能。该工具可以读取文件头,并根据特定长度进行加密,加密后将加密部分写入源文件。同时,该工具也支持解密操作。加密和解密过程是可逆的。本文还提到了一些相关的功能和使用方法,并给出了Python代码示例。 ...
[详细]
蜡笔小新 2023-12-10 16:38:34
-
本文介绍了在HTML中实现表格的页眉页脚布局的解决方案。通过基本的HTML/CSS技术,避免使用内联样式和固定定位,实现了一个标准的页眉页脚布局。提供了一个替代的解决方案,为读者提供了参考。 ...
[详细]
蜡笔小新 2023-12-10 15:50:47
-
一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ...
[详细]
蜡笔小新 2023-10-17 14:35:15
-
一、Notification通知是属于桌面性质的通知,在显示器的右下角蹦出二、兼容性IE14以及其他桌面浏览器都支持WebNotification,目前 ...
[详细]
蜡笔小新 2023-10-14 19:55:15
-
canvas画图经常发现他是模糊的。解决这个问题主要从两个方面下手。改变canvas渲染的像素情况:画1像素的线条看起来模糊不清,好像更宽的样子。解决方 ...
[详细]
蜡笔小新 2023-10-14 13:22:21
-