Les tables de largeur à 100% ne fonctionnent pas dans Gmail Android

Je suis en train de construire un réactif e-mail – c'est effectivement assez grande à travers le conseil, à l'exception de quelques petites pièces qui ne sont pas co-fonctionnement de Gmail pour Android.

J'ai ces très simples bandes noires qui sont assis au sommet de l'e-mail comme un é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 pas comme quelque chose de plus qu'une minuscule bande de noir et blanc qui ressemble à un ultra-mince de point d'exclamation sur le Gmail pour Android.

De même, il y a un pied de page qui n'est pas étendant sur 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 faire de ces occupent toute la largeur de l'e-mail?

source d'informationauteur nebulousecho

  1. 39

    Si vous n'avez pas trouvé une solution essayez

    style="width:100%!important" comme 

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

    Gmail aime bande de la plupart des CSS, mais si vous ajoutez une étiquette !important de garder la plupart du temps.

  2. 11

    Rappeler Gmail que 100% 100% par l'ajout de min-width:100% à notre <table>.

    source

  3. 2

    Après de nombreux essais, la solution comme suit va travailler pour un espacement vertical des questions sur tous les clients de messagerie (disponible sur le Tournesol), incl. L'Application 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>

    Point clé consiste à appliquer width:100% !important à la table, ne fonctionnera pas sur l'application de la td.
    C'est aussi la meilleure solution de remplacement d'espacement vertical des images.

  4. 0

    Je ne suis pas familier avec les clients/sites/etc pour tout ce qui n'est pas conçu pour les PC, donc je ne sais pas si cela va fonctionner ou pas, mais essayez de faire cela.

    <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 "table" de l'élément de fonction, ceci est un exemple de exemple je suis venu avec, en essayant de mon mieux de match en votre couleur et la taille des paramètres de la ligne de décorations.