J'essaie de PS: Cela fonctionne sur d'autres périphériques, sa seule perspective, et je ne peux pas donner à chaque table un TD, car il va casser d'autres choses. P> Marquage: P> Float: Gauche Code> Certaines tables, mais vient de rencontrer un problème majeur, Outlook ne prend pas en charge le flotteur. Eh bien, alors j'ai essayé d'utiliser la table d'aligner et ainsi de suite, mais sans chance. Les tables apparaissent juste, sous l'autre, au lieu de ceux-ci. Tout ce que l'on peut faire à ce sujet? <table class="products">
<tr>
<td align="left" class="test">
<!-- Product 1 -->
<table align="center">
<tr>
<td class="product">
<a href="#">
<img src="#"/>
</a>
</td>
</tr>
</table>
<!-- Product 2 -->
<table align="center">
<tr>
<td class="product">
<a href="#">
<img src="#"/>
</a>
</td>
</tr>
</table>
<!-- Product 3 -->
<table align="center">
<tr>
<td class="product">
<a href="#">
<img src="#"/>
</a>
</td>
</tr>
</table>
<span class="clear"></span>
</td>
</tr>
</table>
6 Réponses :
Utilisez des ressources en ligne telles que:
En ce qui concerne le rendu HTML, la plupart des clients de messagerie sont primitifs et briseront de nombreux éléments HTML bien formés.
La discussion suivante peut être utile:
Quelles directives pour la conception de courriels HTML sont là?
Quelques astuces de base:
Il suffit de mettre chaque sous- Lorsque vous essayez de créer des e-mails HTML, Code comme c'est 1997 . Table dans un TD de la table externe . Comme le td est en plus mutuellement, la table S sera également.
Mais, quand le site est plus étroit, il saute-t-il alors? et sera-t-il possible de centrer chacun sur l'écran, quand sur mobile? Parce quand ils sont en dessous les uns des autres, chacun dans son propre TD, je ne pense pas qu'il est possible de les centrer à l'écran?
Non, ils seront en plus des autres sur chaque écran. Malheureusement, vous ne pouvez pas faire beaucoup pour éviter cela - le rendu HTML dans les clients de messagerie est souvent pire que IE6 ...
Définissez vos largeurs sur chaque table alignée à l'aide de largeur = "", pas de CSS.
Un exemple qui fonctionne: P>
<style type="text/css">
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
</style>
Cela n'a pas fonctionné pour moi dans Outlook 2013 (pour retirer l'espace blanc supplémentaire des tables d'align = "gauche"), mais il suffit d'ajouter Align = "GAUCHE" à la balise IMG elle-même fonctionnait totalement dans Outlook ... qui est sauvage .
Si vous pouvez vivre avec les 2 tables, non pas "Répondre" (l'un sous l'autre) dans Outlook, cela a fonctionné pour moi:
........
<!--[if gte mso 9]>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<![endif]-->
<!-- table 1 goes here -->
<!--[if gte mso 9]>
</td>
<td>
<![endif]-->
<!-- table 12 goes here -->
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
........
Il semble que Outlook.com filtre des filtres float complètement, mais prend en charge affichage: inline-block .
Bien sûr, cela va probablement casser vos tables, car ils dépendent de Affichage: Tableau , mais cela pourrait vous aider avec n'importe quel div s.
Je sais que cela fait longtemps que l'OP a posté cette question, mais j'espère que cela aide toute personne qui en a besoin.
Si vous avez besoin d'une disposition de 2 colonnes et que vous souhaitez que cela fonctionne également dans Outlook, fournissez également un largeur d'environ 45% pour chaque table (pour être Coffre-fort, jette dans un align = "gauche" aussi là-bas). Si vous spécifiez la largeur sous forme de 50%, Outlook (qui a un esprit propre) le rendrait comme une seule colonne.
Entrée dupliquée?