Tableau ligne et les frontières

Question

je coincé dans un moment où je convertir un psd en html/css

La page est la suivante: http://valogiannis.com/freelancer/neurosport/editdetails.html

Sous le titre « Modifier les détails du compte » J'ai une table pour montrer les données de l'utilisateur.

je dois je la règle suivante pour les lignes

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

Comme vous pouvez le voir dans la page bas-frontière bleu se chevauchent la frontière au sommet blanc. Je reçois le même résultat dans tous les navigateurs, donc je suppose que c'est un comportement normal et c'est quelque chose que je ne comprends pas.

Ce que je veux réaliser, c'est que le bord inférieur soit exactement au-dessus du bord blanc. Toute suggestion?

P.S Quelque chose d'autre qui m'aiderait si vous le savez. Comment puis-je faire apparaître la bordure inférieure pour la dernière ligne et le bord supérieur pour la première rangée? Je pense que c'est quelque chose comme tr + tr {... } mais je ne me souviens pas exactement.

Answer 1

La raison pour laquelle vous ne pouvez pas voir vos frontières est parce que cela est dans votre reset.css

table { 
    border-collapse: collapse 
} 

ajouter à ceci à votre css

#editAccountDetails table { 
    border-collapse: seperate 
} 

Vous devra également supprimer les frontières du tr au td

#editAccountDetails td { 
border-bottom:1px solid #CDD3E0; 
border-top:1px solid #FFFFFF; 
} 

Et le sélecteur pour la première ligne est la suivante:

#editAccountDetails tr:first-child {color:blue} 

Et le sélecteur pour la dernière ligne est: (dernière ligne ne fonctionne pas dans IE)

#editAccountDetails tr:last-child {color:blue} 

Answer 2

table { 
    border-collapse: collapse 
} 

essayer cette

Answer 3

mettre simplement les frontières sur la TD au lieu de TR et tout ira bien :-)

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