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

问题描述

| 我尝试了很多组合，但似乎无法在表格的所有单元格和周围获得简单的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中发生。我正在使用Firefox4。不确定如何解决，但至少我只能在一个浏览器中看到它。     

解决方法

        我很惊讶没有在小提琴中看到这个（使用FF4），但这是我想您可能会看到的： 由于每个单元格都有边框，因此当它实际上是两个单元格的顶部和底部边框组合在一起，或与表格本身的边框组合在一起时，您自然会在行之间看到它是“ doubled”最后一行。 尝试使用如下所示的内容：

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

希望我已经正确理解了您的问题，我似乎还记得以前必须这样做。     ,        只需将所需的边框颜色作为背景色放在表中，将其他颜色作为td元素中的背景色，并定义1px的边框间距，如下所示： http://jsfiddle.net/JcbLd/1/