W3.CSS Layout - borders doubling up between rows

[aswiseman]

I've tried to put together a grid with a same width border all round. I thought I'd cracked it with border-collapse, but it still doubles up the border between rows.

There's a code snippet here of a horrible nested table and underneath my W3CSS version of that table that's nearly the same, save for the doubled up row. 

https://jsbin.com/dugozav/edit?html,output

It would be great if W3CSS had some easy way of dealing with gutters and borders (or even some documentation on w3schools).

But any tips on reproducing the table layout in W3CSS without the borders doubling up between rows would be gratefully received :-)

 

[aswiseman]

If I add negative margins to the .w3-cell and .w3-cell-row, this seems to fix the doubling of borders for when the table is collapsed into a single column and when it is displayed with multiple columns...

https://jsbin.com/modimuj/edit?html,output

It's a bit of a bodge job, so if anyone has a neat / clean / better / more compatible / less sucky way of doing this, I'd still be interested to know :-)

[dsonesuk]

 .w3-cell-row {
      margin: auto;
      margin-top: 0;
      width: 79%;
     border-collapse: collapse;
  /*    margin-bottom: -10px;*/

    }
    .w3-cell {
      background-color: #fff;
      border: 5px solid #00c;
     /* margin-bottom: -10px;*/
border-bottom: none;
    }
    .w3-cell-row:before, .w3-cell-row:after {
      content: none;
    }
.w3-cell-row:last-child {border-bottom: 5px solid #00c;}

 

[aswiseman]

Thanks @dsonesuk for that. Interestingly, that works perfectly in the codepen, but doesn't work in my full page full of messy code. (But that's my problem to look at!)

I also found another solution using box-shadow, with fewer lines of CSS...

    .w3-cell-row {
      margin: auto;
      width: 78%;
    }
    .w3-cell {
      background-color: #fff;
      box-shadow: 0px 0px 0px 5px #00c;
    }
    .w3-cell-row:before, .w3-cell-row:after {
      content: none;
    }  

https://jsbin.com/kemizek/edit?html,output

But because it's a shadow the left-hand cell is slightly different in size from the right-hand cell, and that bothered me once I'd spotted it. (The % width also means it doesn't track the size of the table either.)