CODEWITHSUNDEEP
htmlcss
Nathan Manousos
Nathan Manousos

Reputation: 13848

Why do transparent border colors on <tr> appear darker than desired?

Example: http://jsfiddle.net/WaJy7/

I'm trying to add a semi-transparent bottom border to each of my <tr> tags, but the border color is darker than it should be for all but the bottom row and I can't figure out why.

Can you explain why this happens and how to fix it?

I'm not interested in solutions that involve using non-transparent colors.

Upvotes: 4

Views: 84

Answers (1)

Mike Robinson
Mike Robinson

Reputation: 25159

It appears to be a rendering bug with border-collapse. Tables are fun!

Anyway, I removed border-collapse: collapse and moved your border styles to the table cells themselves. It's happier now.

http://jsfiddle.net/WaJy7/2/

table{
    border-spacing: 0; // Equivalent of cell-spacing: 0 on table
    width: 300px;
    margin: 30px;
}

table tbody td{
    border-bottom: 10px solid rgba(0,0,0,0.5);
}

table tbody tr td{
    text-align: center;
    padding: 15px;
}

Upvotes: 3

Related Questions