Строка и границы таблицы

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 Что-то еще, что поможет мне, если вы знаете.Как сделать так, чтобы границы нижней границы не отображались для последней строки, а границы верхней части для первой строки?Я думаю, что-то вроде 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} 

А селектор для последней строки: (последняя строка не работает, т.е.)

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

Answer 2

table {
  border-collapse: collapse
}

попробуйте это

Answer 3

Просто поставьте границы на ТД вместо ТР, и все будет хорошо: -)

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