title: CSS border issue with THEAD TBODY and COLSPAN
body: <p>i have an issue with css/html table:<br>
  When I use <em>thead</em> and <em>tbody</em> tags with a colspan attribute, the bottom border of the header is divided.<br>
  The gap size is dependent of the <em>th</em> border width.</p>
  
  <p><strong>Did you have a solution to get a continuous border on header bottom (without removing <em>thead</em> and <em>tbody</em>) ?</strong></p>
  
  <p><a href="https://jsfiddle.net/vingran/sspyL66L/" rel="nofollow">JSFiddle example</a></p>
  
  <pre><code>table {
    border-collapse: collapse;
  }
  
  th {
    border: 4px solid red;
    border-bottom: 4px solid black
  }
  
  td {
    border: 4px solid blue;
  }
  
  thead tr {
    border-bottom: 5px solid green
  }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    border-collapse: collapse;
  }
  
  th {
    border: 4px solid red;
    border-bottom: 4px solid black
  }
  
  td {
    border: 4px solid blue;
  }
  
  thead tr {
    border-bottom: 5px solid green
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>with THEAD and TBODY but without COLSPAN
  &lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;
          Column 1
        &lt;/th&gt;
        &lt;th&gt;
          Column 2
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;
          Content 1
        &lt;/td&gt;
        &lt;td&gt;
          Content 2
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;br /&gt; COLSPAN with THEAD and TBODY &lt;span style="background:yellow"&gt;(css bug in the middle of green border ?)&lt;/span&gt;
  &lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;
          Column 1
        &lt;/th&gt;
        &lt;th&gt;
          Column 2
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td colspan="2"&gt;
          Content 1 and 2 (merged cells)
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;br /&gt; COLSPAN without THEAD and TBODY
  &lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;
        Column 1
      &lt;/th&gt;
      &lt;th&gt;
        Column 2
      &lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="2"&gt;
        Content 1 and 2 (merged cells)
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>