title: How to make border between cells in table defined entirely by divs (double border inbetween cells)?
body: <p>Im trying to make a div out of divs and I cant figure out how to prevent double border.
  The border between cells is 2 times bigger than outer table border. I want to know how to do it instead of using table because I might want to make a structure that cant be defined as a normal table.. like 2 rows in first column and 3 rows in second column (colspan/rowspan impossible)
  Other answers on stackoverflow didnt help me.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table { width:500px;
  height:300px;
  display:flex;
  }
  .table div{
  height:100%;
  }
  .table div div {border:3px solid blue;
  width:100%;
  height: 33.3333%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="table"&gt;
     &lt;div&gt;
           &lt;div&gt;&lt;/div&gt;
           &lt;div&gt;&lt;/div&gt;
           &lt;div&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
       &lt;div&gt;&lt;/div&gt;
       &lt;div&gt;&lt;/div&gt;
       &lt;div&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
       &lt;div&gt;&lt;/div&gt;
       &lt;div&gt;&lt;/div&gt;
       &lt;div&gt;&lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>