HTML-адрес электронной почты в приложении Gmail не отображается

Question

Создал отзывчивую электронную почту HTML/CSS и сумел использовать все трюки, которые я знаю, чтобы заставить его работать в большинстве мест ... но в настоящее время у меня возникают реальные проблемы с приложением Gmail (на HTC One Mini 2, если это имеет значение).

Что он должен делать (примерно) это: http://s21.postimg.org/7aw1izuxj/shoulddo.png

Что это сделать: s4.postimg.org/g9dm9t68d/isdo.png

(Игнорировать странную расцветку - это помогает я отладки)

код, который делает это не является:

<table class="cooptwocol" style="background-color: red; border-collapse: collapse;" cellspacing="0" cellpadding="0"> 
<tr> 
<td> 
    <table class="coophalfwidth" align="left" style="width: 300px; background-color: #f2f2f2; border-collapse: collapse;" cellspacing="0" cellpadding="0"> 
     <tr> 
      <td><img src="300x300.jpg" width="300px"></td> 
     </tr> 
    </table> 
     <!--[if mso]></td><td><![endif]--> 
    <table class="coophalfwidth" align="left" style="width:300px; background-color: #f2f2f2; border-collapse: collapse;" cellspacing="0" cellpadding="0"> 
     <tr> 
      <td style="width: 15px; font-size: 15px; background-color: blue;" valign="top" rowspan="7">&nbsp;</td> 
      <td colspan="3" style="font-size: 15px;">&nbsp;</td> 
      <td style="width: 15px; font-size: 15px; background-color: blue;" valign="top" rowspan="7">&nbsp;</td> 
     </tr> 
     <tr> 
      <td colspan="3" style="font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #000000;">Title One</td> 
     </tr> 
     <tr> 
      <td colspan="3" style="font-size: 15px;">&nbsp;</td> 
     </tr> 
     <tr> 
      <td colspan="3" style="font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; color: #000000;">Lorem ipsum dolor sit amet, consectetur 
      adipiscing elit. Vestibulum ac hendrerit nibh, ac efficitur libero. Mauris dapibus ante non urna varius dignissim. Phasellus eget finibus orci. Morbi vel dictum turpis. In finibus hendrerit 
      nisi eu accumsan. In nec ante, sed scelerisque eros. In accumsan rhoncus.</td> 
     </tr> 
     <tr> 
      <td colspan="3" style="font-size: 15px;">&nbsp;</td> 
     </tr> 
     <tr> 
      <td><img src="ctaleftgrey.jpg" style="border: 0; text-decoration: none;" align="right"></td> 
      <td style="font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608;">Call to action</td> 
      <td><img src="ctarightgrey.jpg" style="border: 0; text-decoration: none;" align="left"></td> 
     </tr> 
     <tr> 
      <td colspan="3" style="font-size: 15px;">&nbsp;</td> 
     </tr> 
    </table> 
</td> 
</tr> 
</table> 

(нет смысла в проводке CSS для классов как приложение IGN Gmail ores them anyways!)

Я пробовал все, что я могу придумать, и ничто не помогает получить эти блоки, выстроившиеся в приложении Gmail, - изменение размера части изображения, изменение размера текстовой части, вложенность дальнейших таблиц, сбрасывание цветов фона ... И теперь у меня нет идей!

Любая помощь с благодарностью оценили! Долгосрочный пользователь, первый раз постер на StackOverflow :)

******** EDIT ******** ОК, так много настроек позже ... это улучшилось, это просто не выравнивая правильно ...

См изображение здесь: http://s16.postimg.org/kzm0gd4k5/Screenshot_2015_08_07_10_43_18.png

Это так, потому что я должен выравнивание по левому краю первой вложенной таблицы (левый столбец, отображая в качестве первого блока в изображении) и право выравнивать второй (правый столбец, нижняя часть изображения), но мне было интересно, есть ли другой способ сделать то, что не собирается испортить его в приложении Gmail?