当我将 psd 转换为 html/css 时,我陷入了困境
页面是这样的:http://valogiannis.com/freelancer/neurosport/editdetails.html
在标题“编辑帐户详细信息”下方,我有一个表格来显示用户数据。
我对行有以下规则
#editAccountDetails tr {
border-bottom:#cdd3e0 solid 1px;
border-top:#fff solid 1px;
line-height:3;
}
正如您在页面中看到的,蓝色底部边框与白色顶部边框重叠。我在所有浏览器中得到相同的结果,所以我认为这是正常行为,但我无法理解。
我想要实现的是底部边框正好位于白色顶部边框之上。有什么建议吗?
P.S 如果你知道的话,还有其他对我有帮助的事情。如何使最新行的 border-bottom 不出现,第一行的 border-top 不出现?我认为它类似于 tr + tr {... }
但我不太记得了。
最佳答案
你看不到边框的原因是因为它在你的reset.css中
table {
border-collapse: collapse
}
将其添加到您的 CSS 中
#editAccountDetails table {
border-collapse: seperate
}
您还需要删除从 tr 到 td 的边框
#editAccountDetails td {
border-bottom:1px solid #CDD3E0;
border-top:1px solid #FFFFFF;
}
第一行的选择器是:
#editAccountDetails tr:first-child {color:blue}
最后一行的选择器是:(最后一行在 ie 中不起作用)
#editAccountDetails tr:last-child {color:blue}
关于html - 表格行和边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4203607/