Safari table cells border vertical-align - html

Question

Recently I have found a problem on Safari with table.
I have problem with red line (td bottom border or upper).
Here it is on fiddle http://jsfiddle.net/ryrmS/55.
And the full source:
<table border="0">
<tbody>
<tr>
<td style="border-bottom: 2px solid red;">
<div style="width: 20px;"></div>
</td>
<td style="border: 1px solid blue; height: 156px;" rowspan="2">
Content1<br/>
Content2<br/>
Content3<br/>
</td>
</tr>
<tr>
<td style="border-top: 2px solid green;">
<div style="width: 20px;"></div>
</td>
</tr>
</tbody>
</table>
The problem is that the cells do not capture 50% of space in Safari but first takes 0 and third td takes all available height. It works in all browser except Safari.
Also I can't specify fixed height of div or td tag, because it it generated many times in my code and there are different heights and also many tables one inside another.
I can't figure out what the problem is with Safari and how to fix it. Does anyone have some hints?
It looks like:

Answer 1

If you are explicitly setting height: 156px; on the td that spans both rows, why not just set the other 2 tds to height: 88px;?
See working jsFiddle demo
HTML
<table border="0">
<tbody>
<tr>
<td style="border-bottom: 2px solid red; height: 88px;">
<div style="width: 20px;"></div>
</td>
<td style="border: 1px solid blue; height: 156px;" rowspan="2">
Content1<br/>
Content2<br/>
Content3<br/>
</td>
</tr>
<tr>
<td style="border-top: 2px solid green; height: 88px;">
<div style="width: 20px;"></div>
</td>
</tr>
</tbody>
</table>
CSS
table { border-collapse: separate; border-spacing: 0; }
td { vertical-align: middle; text-align: center; }
RESULTS
(tested in FF, Chrome, Safari, and IE)