CODEWITHSUNDEEP
htmlcssipadhtml-tableborder-layout
tolbard
tolbard

Reputation: 1273

Very thin white border between cell of a table only on iPad

This happen only on iPad retina and non retina iOS 5 and 6.

Even if I try to have no border on a table there is a thin white border that appear.

You can see an example of the problem at http://codepen.io/anon/pen/Kcexq.

A iPad or the simulator is needed to view the pb.

Look closely the green tab there is a white border:

look closely the green tab there is a white border

For the record the same thing happen with display as table-cell.

Upvotes: 11

Views: 9236

Answers (3)

jessicajburton
jessicajburton

Reputation: 11

This problem has to do with browsers deliberately rendering table cells with a clean 1 pixel border and the behaviour becomes visible most often with a background color. The solution is to wrap/nest the problematic area in its own table and set the background color of the table, rather than the background color of the cells.

The discussion here is very useful on this https://www.campaignmonitor.com/blog/email-marketing/2011/10/iphone-fail-the-trouble-with-table-borders-and-html-email/

Upvotes: 1

Nune Dadoyan
Nune Dadoyan

Reputation: 1

It is because of background. You should cut image with 1px width and fixed height and put it as a background.

td
   {
     background: url('your_url/green_bg.png') repeat-x;
   }

Upvotes: 0

Maen
Maen

Reputation: 10698

The thin border that appears seems to be caused by the display:table-row and/or display:table-cell property.

Note : it's actually not a white border, it's a kind of rgba:(0,0,0,alpha) ; you can see that if you change the background color behind the table.

By changing td style to display:inline-block;, or tr style to display:block;, it gets rid of the left & right border of the cells, but the bottom border stills stands.

In fact, overriding border-color with a rgba(0,0,0,0); on anything (table, tr, td...) doesn't change anything, neither does border-collapse:collapse; (as Morpheus suggested). Either the computed style doesn't show any border computed, but still, it's here...

Note: iOS also seems to compute the borders depending on the user's zoom scale (tested on a real iPad).

Here is the default table style for Safari iOS :

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

td, th {
    display: table-cell;
    vertical-align: inherit;
}

I'm still looking for an hidden CSS who could add that alpha border, and will update my answer if I find anything.

Upvotes: 1

Related Questions