Tr ne affiche pas de border-bottom

Question

Je suis en train de créer une grille de données et je suis tombé sur deux problèmes.

J'ai dû utiliser border-collapse: separate; pour obtenir des coins arrondis en haut. Mais en faisant cela, j'ai perdu la possibilité d'ajouter des bordures en bas de tr.

Des idées?

http://fiddle.jshell.net/KNb7K/

css:

table.dgrid {
    border: solid 1px #CDCDCD;
    .border-radius(8px, 0px, 0px, 8px);
    width: 100%;
    border-collapse: separate;
}
table.dgrid th:first-child{
    .border-radius(0px, 0px, 0px, 8px);
}

table.dgrid th:last-child{
    .border-radius(8px, 0px, 0px, 0px);
}

table.dgrid th{
    background-color: #E6E6E6;
}
table.dgrid tr th:last-child, table.dgrid tr td:last-child{
    border-right: 0px; 
}
table.dgrid tbody tr:last-child {
    border-bottom: 0;
}
table.dgrid tr {
    border-bottom: solid 1px #CDCDCD;
    border-collapse: collapse ;   
}
table.dgrid th, table.dgrid td {
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    border-right: solid 1px #CDCDCD;
}

html:

            Activer
            Image
            Position
            Lien
            Supprimer

Answer 1

Vous pouvez mettre le bottom-border sur table.dgrid th, table.dgrid td et ensuite je mettrais à jour le table.dgrid tbody tr:last-child pour inclure le td à l'intérieur comme ceci : table.dgrid tbody tr:last-child td.

Answer 2

Supprimez border-collapse: separate; de table.dgrid.

Answer 3

Ceci fonctionne :

table.dgrid {
    width: 98%;
    border-collapse: separate;
    border-bottom: solid 1px #CDCDCD;
    margin:1%;
}
table.dgrid th:first-child{
    border-top-left-radius: 8px;
}
table.dgrid th:first-child, table.dgrid td:first-child{
    border-left: solid 1px #CDCDCD;
}
table.dgrid th:last-child{
    border-top-right-radius: 8px;
}
table.dgrid th{
    background-color: #E6E6E6;
}
table.dgrid tbody tr:last-child {
    border-bottom: 0;
}
table.dgrid th, table.dgrid td {
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    border-top: solid 1px #CDCDCD;
    border-right: solid 1px #CDCDCD;
}