title: How to have vertical line between table cells?
body: <p>In the code below I want to have vertical line between cells, What is the best way to do that? Somethings I tried are giving background color to table but its something same as giving border to table cell, then tried border-left or border-right but it will give one extra line outside cell. Here I want vertical line between cells. Please help. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table tr td {
    background-color: #dedede;
    color: black
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;this is first cell&lt;/td&gt;
      &lt;td&gt;this is second cell&lt;/td&gt;
      &lt;td&gt;this is third cell&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;this is fouth cell&lt;/td&gt;
      &lt;td&gt;this is fifth cell&lt;/td&gt;
      &lt;td&gt;this is sixth cell&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>