web-dev-qa-db-fra.com

Les tableaux 100% largeur ne fonctionnent pas dans Gmail Android

J'essaie de créer un e-mail réactif. En fait, il fonctionne très bien dans tous les domaines, à l'exception de quelques petits messages qui ne coopèrent pas dans Gmail pour Android.

J'ai ces bandes noires sérieusement simples qui se trouvent en haut de l'e-mail en tant qu'élément décoratif:

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

Pourtant, ils ne s'affichent que comme une minuscule bande de noir et blanc qui ressemble à un point d'exclamation ultra-mince de l'application Android de Gmail.

De même, il existe un pied de page qui ne couvre pas toute la largeur de l'e-mail:

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

Des suggestions sur la façon de les faire couvrir toute la largeur de l'e-mail?

15
nebulousecho

Si vous n'avez pas trouvé de solution, essayez 

style = "width: 100%! important" like 

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

Gmail aime supprimer la plupart des CSS, mais si vous ajoutez un libellé! Important, vous les conserverez la plupart du temps. 

42
JoePhillips

Rappelez donc à Gmail que 100% signifie 100% en ajoutant min-width: 100% à notre <table>.

la source

11
insulaner

Après des tests approfondis, la solution ci-dessous fonctionnera pour tous les problèmes d'espacement vertical sur tous les clients de messagerie (disponibles sur Litmus), y compris App Gmail sur 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>

Le point clé est d’appliquer width:100% !important à la table, cela ne fonctionnera pas à la td. C’est aussi la meilleure solution pour remplacer les images avec espaceur vertical.

2
Mark

Je ne suis pas familier avec la création de clients/sites/etc. pour tout ce qui n'est pas conçu pour PC, donc je ne sais pas si cela fonctionnera ou non, mais essayez de le faire.

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

Même si vous perdez la fonctionnalité d'élément "table", voici un exemple d'exemple que j'ai cité, essayant de mon mieux de faire correspondre vos paramètres de couleur et de taille pour les décorations de lignes.

0
user3799724