微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决使用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/     

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。