Question: I have stuck in a point when I convert a psd to html/css

The page is this : <http://valogiannis.com/freelancer/neurosport/editdetails.html>

Below the title "Edit Account Details" I have a table to show the user data.

I have I have the following rule for the rows

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

```

As you can see in the page the blue bottom-border overlap the white border-top. I get the same result in all browser so I suppose is normal behavior and it's something that I can't understand.

What I want to achieve is the border-bottom to be exactly above the white border-top. Any suggestion?

P.S Something else that would help me if you know. How can I make the border-bottom don't appear for the latest row and border-top for the first row? I think it's something like `tr + tr {... }` but I don't remember exactly.

Answer: 
The reason you cant see your borders is because this is in your reset.css

```
table {
  border-collapse: collapse
}

```

add in this to your css

```
#editAccountDetails table {
  border-collapse: seperate
}

```

You will also need to remove the borders from the tr to the td

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

```

And the selector for the first row is:

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

```

And the selector for the last row is: (last row doesnt work in ie)

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

```
Simply put borders on the TD instead of TR and all will be well :-)

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

```