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

Asked 11/3, 2013 at 11:35 Answered 16/11, 2016 at 17:28

html css ipad html-table border-layout

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.

Mensch answered 11/3, 2013 at 11:35 Comment(7)

Did you tried to add border-collapse: collapse? – Backspace 11/3, 2013 at 11:56

Put <meta content='width=device-width; initial-scale=1.0;' name='viewport' /> in the <head>. – Killough 11/3, 2013 at 11:57

Hi, are there calculations that can result in non-rounded number ( like 12.5px ) ? Also, have you tried resetting border-color-opacity ? – Hypethral 11/3, 2013 at 16:20

Sorry, I really tried hard, can't find how to delete those borders. Did you find anything else? – Slapup 12/3, 2013 at 8:38

Anything new with this post ? No solution yet ? – Hypethral 27/8, 2013 at 16:33

#3890641 – Response 26/9, 2013 at 16:39

also iam facing the same issue. any solution? – Dodecanese 30/7, 2015 at 6:39

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.

Slapup answered 11/3, 2013 at 12:55 Comment(7)

table { ...border-collapse: separate; border-spacing: 2px; ...}, try focusing on the border spacing. – Hypethral 11/3, 2013 at 13:35

@MilchePatern I already tried to override all the default properties, without luck : I've set border-collapse:collapse; and border-spacing:0px;, no changes... – Slapup 11/3, 2013 at 13:37

Did you overwrite the 'opacity' ? – Hypethral 11/3, 2013 at 15:19

@MilchePatern The opacity would affect the whole element, not only the border ; I tried border-color: rgba(0,0,0,0); to make the border transparent, without success. – Slapup 11/3, 2013 at 15:30

HEY, rgba(0,0,0,0) means black transparent .. try rgba(0,0,0,1) for the BORDER-COLOR, not the box. Also : background-clip: padding-box; can fix some IE9 behaviors. – Hypethral 11/3, 2013 at 16:15

@MilchePatern The OP wants the border to be transparent / inexistant. Anyway, the border-color overriding doesn't change anything on iPad. Tried all values of background-clip too, no luck. – Slapup 12/3, 2013 at 8:37

transparent != innexistant – Hypethral 15/3, 2013 at 22:13

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/

Knapweed answered 16/11, 2016 at 17:28 Comment(0)

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

Lynnettelynnworth answered 27/2, 2014 at 14:13 Comment(0)

Recommended topics

Hot tags