title: Firefox 1 pixel bug with border-collapse, workaround?
body: <p>Is there any workaround for the following "1 pixel to the left" bug?</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;                                   
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;   
  &lt;body&gt;
  &lt;div style="padding: 50px"&gt;
  &lt;div style="border: 1px solid red"&gt;Table header info&lt;/div&gt;
  &lt;table style="border: 1px solid green; border-collapse: collapse; width: 100%"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;th&gt;Col1&lt;/th&gt;
              &lt;th&gt;Col2&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Hello&lt;/td&gt;
              &lt;td&gt;World&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;div style="border: 1px solid red"&gt;Table footer info&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/oY1ip.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oY1ip.png" alt="Firefox CSS bug"></a>
  </p>
  
  <p>Is there any pure CSS solution to this?</p>
  
  <hr>
  
  <h2>Edit</h2>
  
  <p>I was bit unclear about my table so here it is again:</p>
  
  <p>With border-collapse:</p>
  
  <p><a href="https://i.stack.imgur.com/YtlP4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YtlP4.png" alt="Firefox CSS bug"></a>
  </p>
  
  <p>With cellspacing="0" and without border-collapse as suggested:</p>
  
  <p><a href="https://i.stack.imgur.com/wng1M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wng1M.png" alt="Firefox CSS bug"></a>
  </p>
  
  <p>So now the borders inside my table are <strong>doubled</strong>, but I want 1px border across my table.</p>
  
  <p>When I remove 1px border from table I end with:</p>
  
  <p><a href="https://i.stack.imgur.com/MaVDg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MaVDg.png" alt="Firefox CSS bug"></a>
  </p>
  
  <p>Borders are still doubled inside my table.</p>
  
  <p>I could set only right and bottom border for every TD, TH and left border for every first-child in TR to achieve what I want, but I think there's a simpler way?</p>