錶行和邊界

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