html - 使用 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。

我在 fiddle 中试过这个它在那里看起来不错，但不在我的页面上。我很困惑，因为每一行的底部仍然有这个 2px 的边框。我只是不明白为什么。

有人有什么建议吗？我想要的只是看到带有漂亮的 1px 边框的单元格，每个单元格周围看起来都一样。请注意，它在 fiddle 中看起来不错，所以为什么不在我的 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

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

由于每个单元格都有边框，自然在行之间你会看到它“加倍”，当它实际上是两个单元格的顶部和底部边框组合在一起，或者与表格本身的边框组合在一起作为第一个和最后一个行。

尝试使用一些东西 like this :

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

希望我已经正确理解了你的问题，我似乎记得以前必须这样做。