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

我相信我达到了你想要的效果。请参阅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;
      }
    }

诀窍不是使用实际边框，而是使用 border-spacing 或 margin 来模拟它。

稍后修改：Another cool way以实现此效果是将background-clip: padding-box;与border-color: transparent;结合使用。您可以在this fiddle中看到此示例。

来自 background-clip docs：

background-clip CSS属性指定元素的背景（颜色或图像）是否在其边框下方延伸。

CSS透明表边框

1 个答案: