CSS Transparent Table Borders

Question

The quickest way to demonstrate this is 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.

     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

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 .

Later edit : Another cool way to achieve this effect is by using background-clip: padding-box; combined with border-color: transparent; . You can see this example in this 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.