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

訣竅不是使用實際的邊框，而是使用border-spacing或margins來模擬它。

后期編輯：實現此效果的另一種很酷的方法是使用background-clip: padding-box; 結合border-color: transparent; . 你可以在這個 fiddle 中看到這個例子。

來自背景剪輯 文檔：

background-clip CSS 屬性指定元素的背景（顏色或圖像）是否延伸到其邊框下方。