[英]CSS Transparent Table Borders
The quickest way to demonstrate this is https://jsfiddle.net/9jL30wjh/1/证明这一点的最快方法是https://jsfiddle.net/9jL30wjh/1/
I have a responsive table that stacks on a mobile device.我有一个可堆叠在移动设备上的响应式表格。 Pretty simple but I want the white borders on the table to be transparent through to the body background.
很简单,但我希望桌子上的白色边框对身体背景是透明的。 If I set the borders to transparent then the background of the actual cell is shown so the whole table looks like a block colour (actually an opacity but I don't think this matters).
如果我将边框设置为透明,则会显示实际单元格的背景,因此整个表格看起来像块颜色(实际上是不透明度,但我认为这并不重要)。 That makes sense I guess but since I cant have a margin on the table cells, I can't decide how to work around this or even if I can in this setup.
我猜这是有道理的,但由于我无法在表格单元格上设置边距,因此我无法决定如何解决这个问题,或者即使我可以在此设置中解决。 Can anyone shed any light?
任何人都可以发光吗?
I am using the following CSS for a display: table layout.我正在使用以下 CSS 进行显示:表格布局。
body {
background-color: #3498db;
color: #fff;
}
.pcp-table {
display: table;
table-layout: fixed;
width: 100%;
background: transparent;
padding: 10px 0 3px 0;
}
.pcp-table__row {
display: table-row;
width: 100%;
border-bottom: 1px solid;
background: transparent;
}
.pcp-table__cell {
display: table-cell;
background: rgba(255, 255, 255, 0.4);
height: 30px;
line-height: 30px;
padding: 0 10px;
border-right: 7px solid;
border-bottom: 1px solid;
}
I belive I achieved your desired effect.我相信我达到了你想要的效果。 See this fiddle .
看到这个小提琴。
All that I do was add the following lines of code我所做的只是添加以下代码行
.pcp-table {
border-spacing: 1px;
}
.pcp-table__cell {
border: 0;
}
@media screen and (max-width: 768px) {
.pcp-table {
border-spacing: 0;
}
.pcp-table__cell {
margin-bottom: 1px;
}
}
The trick was not to use an actual border but to simulate it using either border-spacing or margins .诀窍不是使用实际的边框,而是使用border-spacing或margins来模拟它。
Later edit : Another cool way to achieve this effect is by using background-clip: padding-box;
后期编辑:实现此效果的另一种很酷的方法是使用
background-clip: padding-box;
combined with border-color: transparent;
结合
border-color: transparent;
. . You can see this example in this fiddle .
你可以在这个 fiddle 中看到这个例子。
From background-clip docs :来自背景剪辑 文档:
The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.
background-clip CSS 属性指定元素的背景(颜色或图像)是否延伸到其边框下方。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.