Bug with table in mobile Safari - iphone

Question

I have the following table:
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse">
<tr>
<td class="tr-l-t">
</td>
<td class="tr-t">
</td>
<td class="tr-r-t">
</td>
</tr>
<tr>
<td class="tr-l">
</td>
<td class="control-panel">
</td>
<td class="tr-r">
</td>
</tr>
<tr>
<td class="tr-l-b">
</td>
<td class="tr-b">
</td>
<td class="tr-r-b">
</td>
</tr>
...and CSS
.tr-l-t
{
background: url("../Images/tr_l_t.png") no-repeat;
width: 6px;
height: 6px;
}
.tr-l-b
{
background: url("../Images/tr_l_b.png") no-repeat;
width: 6px;
height: 6px;
}
.tr-r-t
{
background: url("../Images/tr_r_t.png") no-repeat;
width: 6px;
height: 6px;
}
.tr-r-b
{
background: url("../Images/tr_r_b.png") no-repeat;
width: 6px;
height: 6px;
}
.tr-t
{
background: transparent url("../Images/tr_t.png") repeat scroll 0 0;
height: 6px;
}
.tr-l
{
background: transparent url("../Images/tr_l.png") repeat scroll 0 0;
}
.tr-r
{
background: transparent url("../Images/tr_r.png") repeat scroll 0 0;
}
.tr-b
{
background: transparent url("../Images/tr_b.png") repeat scroll 0 0;
height: 6px;
}
.control-panel
{
background-color: #151515;
width: 300px;
height: 30px;
}
Both look good in IE7/8, FF, Chrome and Safari (Windows and Mac OS) browsers. However, in Safari for Ipod / Iphone / Ipad white stripes appear in between td tags. I've tried adding border:0 none, padding:0px, margin: 0px, but with no success.
Do you have any ideas on how to fix it?

Answer 1

margin-bottom: -2px; //on one of the TD elements
This worked for me, but in my case I was joining two TDs with a solid white color.
Not sure if this will be usable in every case.

Answer 2

Set the viewport using a meta tag in the template of the page. When the scale is at "1" the tables apear okay. When zooming in or out OR even setting the initial zoom anything other than 1, you get the gaps. That's what I'm working on at the moment.
reg,
MW