Table borders in HTML email on iPad and iPhone

Question

I have a pixel border showing between table rows when doing email testing. iPhone and iPad only. I have tried:

* {
margin:0;
padding:0;

}

I have also tried: this makes the border blue instead of white but I want the border removed completely?

Solution 1

This apparently happens when you've applied background colors or images to individual table cells. I removed individual bgcolor and background-color references from the tables with mystery borders, and the problem went away!

Source: iPhone fail: The trouble with table borders and HTML email (Campaign Monitor)

Solution 2

Try adding this:

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />

This will stop users from zooming in. I found this works too:

<meta content='width=device-width; initial-scale=1.0;' name='viewport' />

But, it looks broken again when you zoom in. Initial load worked, so I was happy with the second option.

Solution 3

try adding:

border-collapse:collapse;

see what happens

Solution 4

I "solve" this using box-shadow. I know it's not pretty but hey, we're talking about tables here :)

Simply put a box-shadow to any TD having the parent node color showing up on iPad. You can even do this only for the iPad inside an iPad specific media query.

Solution 5

It's an issue in iOS, for more info see: http://www.campaignmonitor.com/blog/post/3585/iphone-fail-the-trouble-with-table-borders-and-html-email

Basically, it has to do with different background-colors for the table cells. To quote:

"To prevent these borders from appearing on the iPhone, you can try:

• Removing background colors or images from individual table rows and cells, and/or;
• Nesting the problematic table in a new table, featuring a background color that matches that of the inner table."

View more solutions

Comments

[Thurston]

Same thing unfortunately. I have tried adding it in the head of the html and also as an inline style to the relevant table

[Xand94]

hows about declaring border="0" in the table/td tags?

[Thurston]

Hi, thanks everyone for the comments so far - I've just tried: td width="40" bgcolor="#006BAC" border="0">

[Thurston]

Hi. I never resolved this problem and had to create the email from scratch in the end making everything fit into one td. Would still like to know how to resolve the problem for future use

[Matt Stein]

Hey Thurston, I think I found the solution on Campaign Monitor's website. See my answer above.

[6754534367]

Using Foundation for Email 2, the line appears when I put a center tag around my button tag.

[Ed Morton]

Makes no difference.

[Ed Morton]

Removing the colors from the cells doesn't solve the problem when you need cells with different background colors though and if you follow the advice on that page to put the whole table inside a colored cell then you end up with a thin border around the whole table within that cell so it just moves where the problem appears, it doesn't solve it.

[Ed Morton]

Could you provide an HTML snippet showing how to do this?

[Ed Morton]

Removing colors from the cells doesn't help when you need colored cells, and putting the problematic table inside a cell of a new table doesn't help as you end up with a thin line around that cell (only noticeable when you don't fill every cell of the problematic table).

[Ed Morton]

This actually helped put me on the right path but it took a lot of trial and error to figure out the right syntax/location/dimensions to do this, not least of which was because I wanted to do it inline in the HTML table, not CSS, for sending in a self-contained email so I added my own answer with the HTML included. Thank you!

[Ed Morton]

Got it thanks. FWIW what worked for me was a box-shadow, see stackoverflow.com/a/41782218/1745001.