CSS 透明表格边框

Question

演示

这一点的最快方法是 https://jsfiddle.net/9jL30wjh/1/

我有一个在移动设备上堆叠的响应式表格。 非常简单，但我希望桌子上的白色边框对身体背景是透明的。 如果我将边框设置为透明，则会显示实际单元格的背景，因此整个表格看起来像块颜色（实际上是不透明度，但我认为这无关紧要）。 我想这是有道理的，但由于我不能在表格单元格上留出边距，所以我无法决定如何解决这个问题，甚至无法在此设置中解决问题。 谁能透露任何光芒？

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

Answer 1

我相信

我达到了你想要的效果。看到这个小提琴。

我所做的只是添加以下代码行

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

诀窍不是使用实际的边框，而是使用边框间距或边距来模拟它。

后期编辑：实现此效果的另一种很酷的方法是将background-clip: padding-box;与border-color: transparent;结合使用。您可以在此小提琴中看到此示例。

从背景剪辑文档中：

背景剪辑 CSS 属性指定元素的背景（颜色或图像）是否延伸到其边框下方。