title: CSS Transparent Table Borders
body: <p>The quickest way to demonstrate this is <a href="https://jsfiddle.net/9jL30wjh/1/" rel="nofollow">https://jsfiddle.net/9jL30wjh/1/</a></p>
  
  <p>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?</p>
  
  <p>I am using the following CSS for a display: table layout.</p>
  
  <pre><code>     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;
      }
  </code></pre>