当表格单元格的垂直和水平边框具有不同的颜色时出现问题
唐番茄
假设我有一张桌子，其中各列之间通过使用左白色边框相互分隔：
td, th {
&:not(:first-child) {
border-left: 10px solid #fff;
font-family: monospace;
}
}
它看起来如下： 
看起来不错 现在，我需要使用黑线将所有行与摘要行分开：
tbody {
tr {
&:last-child {
background: #EAF0F6;
border-top: 1px solid #000;
}
}
}
我得到以下图片：
分隔边框变成虚线，该如何解决？
塞巴斯蒂安·布罗施（Sebastian Brosch）
您可以使用内部box-shadow而不是边框的填充来获取列之间的空白和没有间隙的边框（demo）：
td, th {
&:not(:first-child) {
padding-left: calc(10px + 1em);
-webkit-box-shadow: inset 10px 0px 0px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 10px 0px 0px 0px rgba(255,255,255,1);
box-shadow: inset 10px 0px 0px 0px rgba(255,255,255,1);
font-family: monospace;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
表格视图单元格展开和折叠时出现问题
- 2
不仅填充调用函数的单元格，还填充相邻的单元格（在Google表格中）时出现问题
- 3
表格单元格的边框颜色变化
- 4
表格单元格的边框颜色变化
- 5
打印时无法显示表格和单元格边框
- 6
具有垂直标题和宽度相等的单元格的 HTML 表格
- 7
使用 reportlab 创建具有动态行和列的表格时出现问题
- 8
有表格边框，但没有单元格边框
- 9
我可以使用JavaScript / AngularJS根据其值使表格单元格中的数字具有不同的颜色吗
- 10
当内容从另一个单元格更改时，来自表格布局的表格单元格内的 HTML 内容具有不同的填充和边距
- 11
添加表格，tr和单元格不同的特定边框样式和间距
- 12
表格单元格中的水平和垂直对齐
- 13
来自同一表的具有不同单元格的概率会在悬停时更改不同的背景颜色
- 14
UITableViewController，在Storyboard中具有不同的单元格大小和单元格内容
- 15
在熊猫中为数据框单元格分配值时出现问题
- 16
从Excel VBA中的特定单元格读取数据时出现问题
- 17
在HTML表格上放置边框时出现问题
- 18
在HTML表格上放置边框时出现问题
- 19
表格周围有边框，但没有单元格
- 20
UICollectionView出现问题：不显示其所有单元格的标签
- 21
UICollectionView出现问题：无法显示其所有单元格的标签
- 22
悬停时向表格单元格添加左边框
- 23
每个单元格和表格周围的边框
- 24
如何从表格单元格中删除填充和边框？
- 25
对于不同的尺寸类别，是否可以具有不同的表格视图单元格行高？
- 26
表格单元格带有闪烁的边框
- 27
表格单元格带有闪烁的边框
- 28
当<td>具有不同的宽度时，使<th>垂直边框在整个表格中连续
- 29
使用表格边框的类时，如何使某些表格单元格边框消失？
我来说两句