title: HTML table column with ghost column
body: <p>I'm having a werid problem making a super simple table without any css mods.
  The code is the following:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>      &lt;table&gt;
           &lt;tr&gt;
              &lt;th&gt;ID&lt;/th&gt;
              &lt;th&gt;Country&lt;/th&gt;
              &lt;th&gt;Count&lt;/th&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td&gt;2&lt;td&gt;
              &lt;td&gt;ARGENTINA&lt;td&gt;
              &lt;td&gt;7379&lt;td&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td&gt;3&lt;td&gt;
              &lt;td&gt;CHILE&lt;td&gt;
              &lt;td&gt;6543&lt;td&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td&gt;4&lt;td&gt;
              &lt;td&gt;EGYPT&lt;td&gt;
              &lt;td&gt;6512&lt;td&gt;
           &lt;/tr&gt;
        &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm getting crasy in trying to find what's wrong in this super simple code about why is it that the table header's columns refuse to align with its respective values?
  It seems that there's an extra ghost column being created.
  Can anyone explain, please?</p>