CSS issue on iPad with table border

Question

I have a CSS problem when the html page is rendered on iPad. Everything works good in other browsers. The problem is that I get a small space between the cells in my tables as you can see in the picture: http://oi53.tinypic.com/2vl0as9.jpg

If I zoom in the page maximum on the line between the cells, it dissappears.. So it must be some kind of bug when the page is rendered. Can I go around this in some way? This is my table and CSS:

<table class="smallTable" cellpadding=0 cellspacing=0>
    <tr>
        <td class="td1"></td>
        <td class="td2"></td>
    </tr>
    <tr>
        <td class="td1"></td>
        <td class="td2"></td>
    </tr>
</table>

CSS:

.smallTable 
{
    margin: 20px auto 40px auto;
    border-spacing: 0;
}

.smallTable td
{
    margin: 0;
}

.smallTable td.td1 
{
    background: url(../images/table1.png);
}

.smallTable td.td2 
{
    background: url(../images/table2.png);
}

Answer 1

I just bashed my head against this bug for half a day while trying to make an HTML formatted email.

iPad's have a bug (gasp!) when viewing tables at a non 1:1 scale. This is especially apparent if your table's TD tags have a dark background and the TABLE's parent has a light color. Rowspans and colspans amplify the problem.

I initially thought the problem was that iPad was introducing a border.
The real problem is that the coders at Apple didn't decide if they were going to uniformly round fractions of a pixel up, or down while scaling.

Hence, some TD tags appear to have a border when not at 100% scale. When in reality it is just the light background showing through.

The solution is to wrap the table into another table that has the same dark background.

Welcome to 1998 web-design. I hear mp3.com is all the rage. Gonna buy me some mail-order dog treats from pets.com.

Thanks iPad.

Answer 2

I was able to fix it putting this meta tag in the html head when an iDevice (iPod, iPad, iPhone) is detected in the request.

<meta content='width=device-width; initial-scale=1.0;' name='viewport' />

Hope it helps.