Problems getting an 1px border on a table using CSS

Question

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:

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; }

<table class="admin">
    <tbody>
  <tr>
    <th>Row</th><th>Row</th>
  </tr>
  <tr>
    <td>abc</td><td>abc</td>
  </tr>
      <tr>
    <td>abc</td><td>abc</td>
  </tr>
</tbody>
</table>

It looks really simple BUT what I get is a table where every row has a bottom border of 2px.

I tried this in a fiddle 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.

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 :-(

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:

<style>
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; }
</style>
<table class="admin2">
    <tbody>
  <tr>
    <th>Row</th><th>Row</th>
  </tr>
  <tr>
    <td>abc</td><td>abc</td>
  </tr>
      <tr>
    <td>abc</td><td>abc</td>
  </tr>
</tbody>
</table>

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.

Answer 1

I'm surprised to not see this in the fiddle (using FF4), but here's what I think you may be seeing:

Since every cell has a border, naturally in between rows you will see it "doubled", when it's actually the top and bottom border of the two cells combined, or combined with the border of the table itself for the first and last rows.

Try using something like this:

table, th, td {
    border:1px solid #BBB;
}
table {
    border-bottom:0;
    border-left:0;
}
td, th {
    border-top:0;
    border-right:0;
}

Hope I've understood your problem correctly, I seem to remember having to do this before.

Answer 2

Just put the border color you want as background-color in the table, a different color as background-color in the td elements and define a border-spacing of 1px, like this: http://jsfiddle.net/JcbLd/1/