使用CSS在表上获得1px边框时出现问题

Question

我已经尝试了很多组合,但我似乎无法在所有单元格和表格周围获得简单的1px边框.这就是我所拥有的:

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>

它看起来很简单但是我得到的是一个表格,其中每一行的底边都是2px.

我在小提琴中尝试过它看起来很好但不在我的页面上.我完全感到困惑,因为每行底部仍然有这个2px边框.我只是不明白为什么.

有没有人有什么建议？我想要的只是看到具有漂亮的1px边框的细胞,每个细胞周围看起来都是一样的.请注意,它在小提琴中看起来不错,所以为什么不在我的Firefox浏览器中:-(

这是另一个例子.我刚刚加入到我的页面中.我使用了不同的类名,所以我可以确定没有从其他地方继承的东西:

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

注意:在Spudley评论之后,我检查了其他浏览器,这只发生在Firefox上.我正在使用Firefox 4.不知道如何解决,但至少我只能用一个浏览器看到它.

Answer 1

我很惊讶在小提琴中没有看到这个(使用FF4),但这是我认为你可能会看到的:

由于每个单元格都有一个边框,因此当它实际上是两个单元格的顶部和底部边框组合时,或者与第一行和最后一行的表格边界相结合时,自然会在行之间看到它"加倍".

尝试使用一些像这样的:

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

希望我能正确理解你的问题,我似乎记得以前必须这样做.

Answer 2

只需将所需的边框颜色作为背景色放在表中，将其他颜色作为td元素中的背景色，并定义1px的边框间距，如下所示：http : //jsfiddle.net/JcbLd/1/