Why do the transparent border colors on <tr> look darker than I wanted?

Question

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

I am trying to add a translucent lower border for each of the tags <tr>, but the border color is darker than it should be for everyone except the bottom line, and I cannot understand why.

Can you explain why this is happening and how to fix it?

I'm not interested in solutions that use opaque colors.

Answer 1

This seems to be a crash rendering error. Tables are funny!

In any case, I removed the collapse collapse: collapse and transfer border styles to table cells. Now it is happier.

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