当我将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;
}
正如您在页面中看到的那样,蓝色底部边框与白色边框顶部重叠。我在所有浏览器中得到相同的结果,所以我认为这是正常的行为,这是我无法理解的。
我想要实现的是边框底部正好在白色边框顶部之上。有什么建议吗?
如果你知道的话,还有其他可以帮到我的东西。如何为第一行的最新行和border-top显示border-bottom?我认为它类似tr + tr {... }
,但我不记得确切。
答案 0 :(得分:2)
table {
border-collapse: collapse
}
试试这个
答案 1 :(得分:2)
您无法看到边框的原因是因为这是在您的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}
答案 2 :(得分:0)
简单地将边框放在TD而不是TR上,一切都会很好: - )
#editAccountDetails tr td {
border-bottom:#cdd3e0 solid 1px;
border-top:#fff solid 1px;
line-height:3;
}