如何解决使用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 举报,一经查实,本站将立刻删除。