title: How to hide borders between rows in a html table and display only borders between columns using css
body: <p>I have an simple html table where I want to only display the borders between columns and hide the borders between rows. I tried the code below but it did not achieve what I was after.</p>
  
  <p>I have also used <code>border-collapse : collapse</code> in css, but it didn't seem to work.</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 td, table th { border: 1px solid black; padding: 5px; }
  
  #items { clear: both; margin: 30px 0 0 0; border: 1px solid black; }
  #items th { background: #eee;   }
  #items textarea { width: 300px; height: 50px; }
  
   #items,td {
      border-collapse: collapse;
      border-spacing: 0;
      margin: 0;
      padding: 0;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="items"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th style="width:100px;"&gt;Slno&lt;/th&gt;
              &lt;th style="width:300px;"&gt;Description of Goods&lt;/th&gt;
              &lt;th style="width:120px;"&gt;Quantity&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody class="tbody"&gt;
          &lt;tr&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;S1&lt;/td&gt;
              &lt;td&gt;3&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;S2&lt;/td&gt;
              &lt;td&gt;5&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;S3&lt;/td&gt;
              &lt;td&gt;5&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>