Table borders in HTML email on iPad and iPhone

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 开发者_C百科border removed completely?

---

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)

---

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.

---

try adding:

border-collapse:collapse;

see what happens

---

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."

---

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.

---

border: 0;

should do it nice and easy

---

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

---

While changing the background color of the containing table worked for most parts of my layout, for one section, that wasn't an option. There I used relative positioning and a left value of -1 (on the right cell). I was surprised to see positioning supported (at least in iOS 6.1). I suppose a negative margin would have worked too.

---

In my case I wanted a table that looked like overlapping boxes where the background box ended before the end of the row and the foreground box started indented from the start of the row. After reading every web site, Q/A, suggested here and trying every alternative what eventually worked was specifying a box-shadow, e.g.:

<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 gap line between the 2 "background" navy cells appearing on iPhones and the box-shadow: 0px -1px 0px navy; let me put a thin navy line above the bottom navy cell and so filled in what otherwise was that gap between the top and bottom navy cells.