title: HTML Tables: How to get continuous vertical and interrupted horizontal lines
body: <p>I need to style a html table with different grid-lines. The horizontal lines should be continuous (foreground) and the vertical lines interrupted like as they where in the background, overlaid by the horizontal lines. Some horizontal lines should be 1px and others 2px height the vertical lines/borders should be 3px, but there should be no space or border on the left and right side of the table (so that the table has 100% width and appears left and right justified). The result should look like attached image. Any help appreciated.</p>
  
  <p>I experimented with <code>border-collapse: separate;</code> and different <code>border-spacing</code>, but I can't get the different horizontal line-heights or the table has a border on the left and right.</p>
  
  <p><a href="https://i.stack.imgur.com/NlBRP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NlBRP.jpg" alt="image of how the result should look like"></a></p>
  
  <p>See snippet for table structure. The html could not be changed, i.e. I can't add fake columns.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;table&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;th-1&lt;/th&gt;
            &lt;th&gt;th-2&lt;/th&gt;
            &lt;th&gt;th-3&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;tr-1, td-1&lt;/td&gt;
            &lt;td&gt;tr-1, td-2&lt;/td&gt;
            &lt;td&gt;tr-1, td-3&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;tr-2, td-1&lt;/td&gt;
            &lt;td&gt;tr-2, td-2&lt;/td&gt;
            &lt;td&gt;tr-2, td-3&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>