CSS issue on iPad with table border

user_470192 0
Viewed 19120

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);
}
ipad html-table border css iphone
6 Answers

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.

user_5711260

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.

user_4518690
Related