title: Problems getting an 1px border on a table using CSS
body: <p>I have tried a lot of combinations but I can't seem to get just a simple 1px border on all the cells and surrounding of a table. Here's what I have:</p>
  
  <pre><code>table.admin    { border-collapse:collapse; }
  table.admin,
  table.admin td,
  table.admin th { border: 1px solid #BBB; padding: 5px; }
  table.admin td { text-align:left; }
  table.admin th {background-color: #BBB; font-weight: 400; }
  
  &lt;table class="admin"&gt;
      &lt;tbody&gt;
    &lt;tr&gt;
      &lt;th&gt;Row&lt;/th&gt;&lt;th&gt;Row&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;abc&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;
    &lt;/tr&gt;
        &lt;tr&gt;
      &lt;td&gt;abc&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>It looks really simple BUT what I get is a table where every row has a bottom border of 2px. </p>
  
  <p>I tried this in a <a href="http://jsfiddle.net/dJyCq/" rel="noreferrer">fiddle</a> It looks fine there but not on my page. I am totally confused as there is still this 2px border on the bottom of every row. I just can't see why. </p>
  
  <p>Does anyone have any suggestions? All I want is to see the cells with a nice 1px border that looks the same around every cell. Please note that it looks good in fiddle so why not in my Firefox browser :-( </p>
  
  <p>Here's another example. I just added to my page. I used a different class name so I could be sure there was nothing inherited from another place:</p>
  
  <pre><code>&lt;style&gt;
  table.admin2    { border-collapse:collapse; }
  table.admin2,
  table.admin2 td,
  table.admin2 th { border: 1px solid #BBB; padding: 5px; }
  table.admin2 td { text-align:left; }
  table.admin2 th {background-color: #BBB; font-weight: 400; }
  &lt;/style&gt;
  &lt;table class="admin2"&gt;
      &lt;tbody&gt;
    &lt;tr&gt;
      &lt;th&gt;Row&lt;/th&gt;&lt;th&gt;Row&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;abc&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;
    &lt;/tr&gt;
        &lt;tr&gt;
      &lt;td&gt;abc&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Note: After comments by Spudley I checked other browsers and this only happens with Firefox. I am using Firefox 4.  Not sure how to solve but at least I see it only with one browser.</p>