表格行和边框

Question

当我将 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;
}

正如您在页面中看到的，蓝色底部边框与白色顶部边框重叠。我在所有浏览器中得到相同的结果，所以我认为这是正常行为，这是我无法理解的。

我想要实现的是边框底部正好位于白色边框顶部上方。有什么建议吗？

PS 如果你知道的话，还有其他对我有帮助的事情。如何使最新行的 border-bottom 不出现，第一行的 border-top 不出现？我认为它类似于 tr + tr {... } 但我不太记得了。

Answer 1

你看不到边框的原因是因为这是在你的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} 

Answer 2

table {
  border-collapse: collapse
}

试试这个

Answer 3

只需将边界放在 TD 上而不是 TR 上，一切都会好起来:-)

#editAccountDetails tr td {
    border-bottom:#cdd3e0 solid 1px;
    border-top:#fff solid 1px;
    line-height:3;
}