title: html+css tables - border-bottom of tr overlaps border-right of td/th
body: <p>Here is a sample of my current code: <a href="http://jsfiddle.net/mzALe/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p>The problem is, the dark gray line between the table header and body is getting cut by the margin-right of the cells. I want to have a that border between columns and a non-breaked margin between header and body table.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;table id="prazo"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;month&lt;/th&gt;
        &lt;th&gt; val &lt;/th&gt;
        &lt;th&gt; val &lt;/th&gt;
        &lt;th&gt; val &lt;/th&gt;
        &lt;th&gt; val &lt;/th&gt;
        &lt;th&gt; val &lt;/th&gt;
        &lt;th&gt;val&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr class="srow"&gt;
        &lt;td&gt;January&lt;/td&gt;
        &lt;td&gt;$100&lt;/td&gt;
        &lt;td&gt;$100&lt;/td&gt;
        &lt;td&gt;$100&lt;/td&gt;
        &lt;td&gt;$100&lt;/td&gt;
        &lt;td&gt;$100&lt;/td&gt;
        &lt;td&gt;$100&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;January&lt;/td&gt;
        &lt;td&gt;$100&lt;/td&gt;
        &lt;td&gt;$100&lt;/td&gt;
        &lt;td&gt;$100&lt;/td&gt;
        &lt;td&gt;$100&lt;/td&gt;
        &lt;td&gt;$100&lt;/td&gt;
        &lt;td&gt;$100&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="srow"&gt;
        &lt;td&gt;January&lt;/td&gt;
        &lt;td&gt;$100&lt;/td&gt;
        &lt;td&gt;$100&lt;/td&gt;
        &lt;td&gt;$100&lt;/td&gt;
        &lt;td&gt;$100&lt;/td&gt;
        &lt;td&gt;$100&lt;/td&gt;
        &lt;td&gt;$100&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>and the css:</p>
  
  <pre><code>#prazo {
      font-family: 'Bitter', serif;
      width: 100%;
      border-spacing:0;
      border-collapse:collapse;
  }
  
  #prazo thead tr{
      height: 50px;
      background-color: #ffffff;
      font-weight:bold;
      border-bottom: 3px solid #7d7d7d !important;
  }
  
  
  
  #prazo td, th {
      padding-left: 10px;
      padding-right: 10px;
      font-size: 14px;
      height: 30px;
      background-color: #ffffff;
      border-right: 3px solid #f6f6f6;
  }
  
  .srow td {
      background-color: #f2f2f2 !important;
  }
  
  #prazo th {
      font-size: 16px;
  }
  </code></pre>