Border-top from tbody and border-bottom from thead don't work at the same time?

In order for this to work, you need to

a) use both border-collapse and border-spacing

b) set the borders on the most interior elements of the table

c) you must set border-collapse and border-spacing on the table so it inherits

so

table {
  background: pink; 
  border: 0; 
  border-collapse: separate; 
  border-spacing: 0 5px;
}

thead tr th {
  border-bottom: 1px solid red; 
  border-collapse: separate; 
  border-spacing: 5px 5px;
} 

tbody tr#first td {
  border-top: 3px solid #4d4d4d; 
  border-collapse: separate;
  border-spacing: 5px 5px;
}

I changed some of the colors to make it easier to see.

http://jsfiddle.net/jasongennaro/Pf7My/1/