CSS透明表格边框

证明这是https://jsfiddle.net/9jL30wjh/1/CSS透明表格边框

我有一个移动设备上叠加一个响应表的最快方式。很简单，但我希望桌子上的白色边框透明到身体背景。如果我将边框设置为透明，则显示实际单元格的背景，以便整个表格看起来像块颜色（实际上是不透明的，但我认为这不重要）。这是有道理的，我猜想，但由于我不能有一个表格单元格的余量，我不能决定如何解决这个问题，或者即使我可以在这个设置。任何人都可以摆脱光线吗？

我正在使用以下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; 
    }

来源

2016-03-03 Dan McDaid

添加边框：透明;到.pcp-table__cell给出所需的结果？ – silviagreen

我无法理解这个问题，但@silviagreen的评论是有道理的。 –

不幸的是，边界变得透明，但单元格的背景变得可见，而不是外部容器的背景，这是期望的结果。 –

我相信我达到你想要的效果。见this fiddle。

所有我能做的就是添加的代码

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

诀窍是不要用一个实际的边界，但使用任何边框间距或利润率来模拟它以下行。

后来编辑：Another cool way达到这种效果是通过使用background-clip: padding-box;与border-color: transparent;结合。你可以在this fiddle中看到这个例子。

从背景剪辑docs：

的背景剪辑 CSS属性指定的元素的背景，无论是彩色或图像是否延伸其边界的下方。

来源

2016-03-03 12:14:57

非常感谢，我似乎有边缘问题，并尝试边界间距 - 但我可能已设置边框：没有这是细微差别，我想如果你没有任何边界除边界之外边界间距被忽略：0将设置宽度为0的边界是正确的？ –

@DanMcDaid不，** border **属性可以和** border-spacing **结合使用。看到[fiddle]（https://jsfiddle.net/ouj2842v/4/） –

CSS透明表格边框

回答

相关问题