表行和边界

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; 
} 

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

我想实现的是边框底部正好在白色边框上方。任何建议？

P.S其他的东西，如果你知道会帮助我。我怎样才能让边界底部不出现在第一行的最新行和边界顶部？我认为它就像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; 
}