CODEWITHSUNDEEP
htmlcsscss-tables
Sean Marcus
Sean Marcus

Reputation: 91

<tr> border top working but not border bottom

Here's the issue. I have my code so that I should be seeing a border on top and bottom of each <tr> item. However, I only see what's on bottom except for the top element.

.tstyle1 {
    margin: 10px 0 0 30px;
    width: 950px;
}

.tstyle1 tr {
    height: 120px;
    border-bottom: 1px solid black;
    border-collapse: separate;
    border-top: 1px solid black;
    border-bottom: 1px solid orange;
}

.tstyle1 td {
    border: none;
}

Here's the issue recreated. http://jsfiddle.net/fL3rx/

Upvotes: 4

Views: 19177

Answers (2)

codingbiz
codingbiz

Reputation: 26376

The issue is that your border-bottom definition is simply covering your border-top definition. So the color beneath does not show. Try setting the border-bottom:none and you'll see the top border shows

The suggestion by @Pricey did some magic though.

Upvotes: 1

Pricey
Pricey

Reputation: 5929

Try

adding display: block; to your .tstyle1 tr

Upvotes: 5

Related Questions