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

Question

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:

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

Answer 1

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.