[Résolu] TD 100% sur mobile

Bonjour à tous !

Après de nombreux test, je craque

Voila, j'ai un souci qui parait simple, afficher mon TD en 100% avec un background de couleur et un texte centré... Je n'ai aucun souci, tout s'affiche correctement sur mon client mail GMAIL pour exemple sur PC, en revanche dès qu'on passe sur mobile ( Samsung G4 ), le TD est aligné sur la gauche et s'arrête à la fin de mon texte... donc il ne prend pas 100% de l'écran !

J'ai un peu tout essayé jusqu'à mettre un display: block sur mon TD avec un witdh 100%...

Si vous avez déjà été confronté à ce problème je suis très preneur !

( J'ai trouvé une astuce avec une image en 100%, mais ca reste vraiment du bricollage, même si souvent le mailing c'est du bricolage ... )

Voici mon code que j'ai simplifié... :

<style type="text/css">
         @media only screen and (max-width: 480px) {
         table[class=devicewidth] {width: 280px!important;text-align:center!important;}
         td[class=devicewidth] {width: 280px!important; text-align: center !important}
         }
</style>

<table bgcolor="#000" width="100%" bgcolor="#fff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
   <tbody>
      <tr>
         <td>
            <table bgcolor="#e41e31" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
               <tbody>
				  <tr>
					 <td height="100" align="center" style="display:block; width:100%">
						Prendre rendez-vous
					 </td>
				  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

D'avance merci...
Modifié par Sangohan62 (09 Feb 2016 - 10:22)

Bonjour,
Je ne suis pas un pro de CSS mais il me semble qu'actuellement tu appliques ta largeur sur une table qui est elle-même dans un TD dimensionné par défaut.
Déjà une structure table dans TD me paraît un peu contre nature par rapport aux préconisations actuelles en matière de présentation, mais là encore CSS n'y est pas opposé a priori.
Pas sûr que ma réponse soit la bonne, mais je regarderais dans ce sens si c'était mon code qui posait problème.
Je consulte le sujet sur un mobile et il n'est pas forcément facile d'appréhender code HTML et CSS d'un seul coup d'œil sur petit écran...

J'ai également testé uniquement avec un tableau, sans imbrication et le résultat est le même, je me demande si les media queries sont réellement pris en compte...

Hello,

Pour faire le test et avoir un "vrai rendu visuel", applique une couleur différente (et bien distincte) à chaque niveau de ta structure (div, table, tr, td...). Même si ce sera très moche, tu verras tout de suite l'élément qui ne fait pas bien son boulot.

Ajoute aussi des couleurs au niveau des <table>... C'est souvent là qu'est le problème.

Bon courage

Oui j'avais essayé de mettre 3 couleurs dans mes tables et TD, mais tout était tronqué... je viens de tomber sur un article ou je vois que par exemple ( et bien d'autre ), GMail supprime les balises <style> en en-tête ainsi que son contenu... ce qui explique le problème de média query...

J'ai trouvé ma réponse : Mes tests étaient basé sur Gmail qui ne prend pas en compte les styles dans le HEAD.

Solution : https://responsivedesign.is/ask-me/answers/supporting-media-queries-in-email-gmail

C'est bon à savoir !