Table Gap Issue In Gmail App

After days of of trying to find a solution(unsuccessfully), I've decided to turn to the collective wisdom and experience of the community for help. I I have a email template that d

Solution 1:

Unfortunately the gmail android app does some strange things with image and table sizes while trying to fit your email to the screen. Most issues can be solved by giving the container table an inline min-width, or by giving your images display: block; and setting explicit heights and widths where needed.

Your case, however, is a little different. The problem seems to appear when you nest a table with multiple rows of images inside of a cell whos siblings have no such nested tables. Here is another example of this problem.

I have found what appears to be a workaround solution here, however, I have had no luck implementing it. Maybe you will have better luck, but you may have to change your HTML structure for it to work. Specifically, you may have to replace your menu text links with images.

To sum up the workaround:

Restating the problem - Gmail app rounds up when resizing tables, and down when resizing images. This can cause a 1 pixel gap appear between images on a table.

1. Give all <tr>s an inline style of display: block; white-space: nowrap;.
2. Give all <td>s an inline style of display: inline-block;.
3. Remove any width or height declarations from your <td>s.
4. Remove any whitespace between your <td>s.
5. Ensure that your container table has a min-width.

Campaign Monitor's CSS Guide may also be of use to you while troubleshooting this issue.

---

Here is your code with my attempt at implementing the workaround:

<table width="600" border="0" cellspacing="0" cellpadding="0" style="min-width:600px; background-color: green;">
<tr style="display: block; white-space: nowrap;">
<td align="left" style="vertical-align:top; line-height:85px;display: inline-block;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_01y.jpg" width="220" height="85" alt="LOGO" title="LOGO" style="display:block; border:0;" /></a></td><td align="left" style="vertical-align:top;display: inline-block;">
    <table width="380" border="0" cellspacing="0" cellpadding="0" style="min-width:380px;">
    <tr style="display: block; white-space: nowrap;">
    <td align="center" style="vertical-align:top; line-height:15px;display: inline-block;"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_02y.gif" width="380" height="15" style="display:block;" border="0" alt="" /></td>
    </tr>
    <tr>
    <td width="380" height="52" align="center" bgcolor="#555555" style="vertical-align:center; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#ffffff;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">QWERTYUIO</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">ASDF</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">ZXCV BNMLK</a></td>
    </tr>
    <tr style="display: block; white-space: nowrap;">
    <td align="center" style="vertical-align:top; line-height:18px;display: inline-block;"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_03y.jpg" width="380" height="18" style="display:block;" border="0" alt="" /></td>
    </tr>
    </table>
</td>
</tr>
</table>

Solution 2:

I was try display: block & display: block and doesnt works, but display: flex in the <tr> works in the email for mobile-andorid and all emails even desktop