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

Orderly

I have the same issue with the ipad rendering. I am using webkit baackground fills and it's also doing this same thing. – Iambic

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.

Midinette

Sadly, my table rows use alternating background colors and have adjustable height content, so changing the background color doesn't help for my situation :). – Bell

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.

Conducive

Interesting approach, but the border come back when I zoom slightly. – Naoise

Answer 3

Eureka! I found a solution that worked for me.

I had a light grey background and this seemed to be the color that was revealed as borders around my tables which were a darker color.

To fix it you have to place all tags which are affected by the borders revealing themselves into another table the same colour.

This worked after trying so many things. hope this helps

Pervious

Answer 4

Zheileman's solution worked for me and now my tabs with CSS image backgrounds look correct on iPad. View the top menu tabs on http://www.meishapersonaltrainer.com on an iPad for an example of the fix in action.

My PHP which performs the detection and adds the META looks like this

if (isset($_SERVER['HTTP_USER_AGENT']))
{
    $ua = strtolower($_SERVER['HTTP_USER_AGENT']);
    if (strpos($ua, 'ipad') !== false || strpos($ua, 'ipod') !== false ||strpos($ua, 'iphone') !== false)
    {
        print '<meta content="width=device-width; initial-scale=1.0;" name="viewport" />';
    }
}

Insufferable

Answer 5

This is a general practice of managing table styles on the web, and that should fix your issue:

table { border-collapse: collapse; }

And you may remove the margin settings for your table cells, they do not affect anything.

Deteriorate

No change to border styling worked - the issue turns out to not have been borders at all, it just appears to be one – Bell

Answer 6

I solved this in a weird way.

First up I added a <div> inside of every cell which was experiencing this issue, if there is content in the cell then make sure the <div> is after it and does not wrap the content. I then applied the class ios-table-fix to the <div> and ios-table to any of the table cells (<td>).

Then I wrote some CSS inside of media queries which target the iPad's screen resolution. First up I added the following to ios-table:

overflow: hidden;
position: relative;

Next I added the following to the ios-table-fix:

bottom: -1px;
left: -1px;
position: absolute;
right: -1px;
top: -1px;
z-index: 1;

You're going to want to apply position: relative; and z-index: 2; to any content inside of the table cells, otherwise they will disappear.

This effectively draws a new background for the table cell which overflows the border issue without changing the size of the table cell. Since it's only an iPad issue we can use CSS in the <head> tag to avoid affecting everything.

I only tested this briefly but it seems to work without causing issues elsewhere.

Howland

Since this, I tested in Windows Phone and it seems to still suffer from border issues. – Howland