Table Borders in HTML Email on iPad and iPhone

Question

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

* { margin:0; padding:0; } 

I also tried: does this make the border blue instead of white, but I want the border to be completely removed?

Answer 1

This apparently happens when you apply background or image colors to individual cells in a table. I removed individual bgcolor and background-color links from tables with mysterious borders and the problem disappeared!

Source: iPhone error: problem with table borders and HTML email address (campaign monitor)

Answer 2

Try adding this:

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

This will not allow users to zoom. I also found this to work:

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

But it looks broken again when you zoom in. The bootstrap worked, so I was pleased with the second option.

Answer 3

try adding:

 border-collapse:collapse; 

see what happens

Answer 4

This is a problem in iOS, for more information see: http://www.campaignmonitor.com/blog/post/3585/iphone-fail-the-trouble-with-table-borders-and-html-email

This is mainly due to the different background colors for the table cells. Quote:

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

• Removing background colors or images from individual rows and cells of the table and / or;
• Insert a problem table into a new table with a background color that matches the color of the internal table.

Answer 5

I "solve" this using the window shadow. I know this is not very, but hey, we are talking about tables here :)

Just drop a shadow on any TD with the parent node color displayed on the iPad. You can even do this only for the iPad inside a specific iPad multimedia request.

Answer 6

 border: 0; 

should do it beautifully and easily

Answer 7

Images? add style="display:block;" to images

Answer 8

When changing the background color of the table contained in most sections of my layout, for one section this is not an option. There I used relative positioning and a left value of -1 (in the right cell). I was surprised that positioning is supported (at least in iOS 6.1). I suppose a negative margin would work too.

Answer 9

In my case, I needed a table that looked like overlapping fields, in which the background field ended to the end of the line, and the foreground field began with the indent from the beginning of the line. After reading every Q / A website offered here, and trying every alternative that ultimately works, indicated a window shadow, for example:

 <table style="margin-right: auto; margin-left: auto; width: 100%;" cellspacing="0" cellpadding="3"> <tbody> <tr> <td colspan="4" style="width: 90%; background-color: navy;"> <span style="color: #ffffff;">Background Box Line 1</span> </td> <td style="width: 10%;"> &nbsp; </td> </tr> <tr> <td style="background-color: navy; width: 25%; box-shadow: 0px -1px 0px navy;"> <span style="color: #ffffff;">BG Box Line 2</span> </td> <td colspan="4" rowspan="2" style="background-color: red; width: 75%;"> Foreground Box Line 1<br> Foreground Box Line 2 </td> </tr> <tr> <td> &nbsp; </td> </tr> </tbody> </table> 

The line I had to get rid of was a thin horizontal line of spaces between the 2-inch "naval" cells appearing on the iPhone, and box-shadow: 0px -1px 0px navy; allowed me to lay a thin line of the navy over the lower naval cell and fill it otherwise it was a gap between the upper and lower naval cells.