CODEWITHSUNDEEP
htmlcssrowbordercss-tables
Sotiris
Sotiris

Reputation: 40066

Table row and borders

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.

Upvotes: 2

Views: 4513

Answers (3)

Blowsie
Blowsie

Reputation: 40535

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}

Upvotes: 2

Vincent Robert
Vincent Robert

Reputation: 36120

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

Upvotes: 0

fcalderan
fcalderan

Reputation: 

table {
  border-collapse: collapse
}

try this

Upvotes: 2

Related Questions