Таблицы ширины 100% не работают в Gmail Android

Я пытаюсь создать отзывчивый адрес электронной почты – на самом деле он работает очень хорошо по всем направлениям, за исключением небольших кусочков, которые не работают в Gmail для Android.

У меня есть эти очень простые черные полосы, которые сидят в верхней части письма в качестве декоративного элемента:

<table width="100%" cellpadding="0" cellspacing="0" align="center" valign="top"> <tr><td width="100%" height="11" bgcolor="#000000"></td></tr> <tr><td width="100%" height="2" bgcolor="#FFFFFF"></td></tr> <tr><td width="100%" height="1" bgcolor="#000000"></td></tr> <tr><td width="100%" height="30" bgcolor="#FFFFFF"></td></tr> </table> 

Тем не менее они не отображаются как нечто большее, чем крошечная полоса черного и белого цвета, которая напоминает ультратонкий восклицательный знак в приложении Gmail для Android.

Аналогично, есть нижний колонтитул, который не охватывает всю ширину письма:

 <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000"> <tr> <td> <table width="650" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000"> <tr> <td align="right" class="footer"> <img src="images/footer.png" /> </td> </tr> </table> </td> </tr> </table> 

Любые предложения о том, как это сделать, охватывают всю ширину письма?

Solutions Collecting From Web of "Таблицы ширины 100% не работают в Gmail Android"

Если вы не нашли решение, попробуйте

Style = "width: 100%! Important" like

  <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000" style="width:100%!important"> 

Gmail любит стирать большую часть CSS, но если вы добавите ярлык, важный будет держать их большую часть времени.

Так что напомните Gmail, что 100% означает 100% путем добавления min-width: 100% к нашей <table>.

источник

После тщательного тестирования решение, как указано ниже, будет работать для любых проблем с вертикальным интервалом для всех почтовых клиентов (доступно на Litmus), в том числе. Приложение Gmail на Andriod.

 <table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100% !important;"> <tr> <td bgcolor="#00a0cc" height="25" style="background:#00a0cc;height:25px;line-height:0;font-size:0;">&nbsp;<br /></td> </tr> </table> 

Ключевым моментом является применение width:100% !important для таблицы, не будет работать при применении к td . Это также лучшее решение для замены вертикальных спейсерных изображений.

Я не знаком с созданием клиентов / сайтов / и т.д. для чего-либо, что не предназначено для ПК, поэтому я не уверен, что это будет работать или нет, но попробуйте сделать это.

 <center> <h1 style="color:#888888;">Android Client Header</h1> <p>Demonstration</p> </center> <hr color="#000000" style="height:11px;"> <hr color="#FF0000" style="height:2px;"> <hr color="#000000" style="height:1px;"> <hr color="#FF0000" style="height:30px;"> <h3 style="color:#0070ff;">Content 1</h3> <p color="#808080">E-mail Here</p> <hr color="#000000"> <center> <h1 style="color:#db880f;text-size:10px;">Android Client Footer</h1> <p style="color:#888888;">Demonstration</p> </center> 

Даже несмотря на то, что вы потеряете элемент «table», это пример, который я придумал, пытаясь изо всех сил подогнать ваши настройки цвета и размера для украшений линий.