Y a-t-il un équivalent de CSS max-width qui fonctionne dans les e-mails HTML?
j'essaie de créer un email HTML qui s'affichera correctement dans tous les clients email largement utilisés. J'enroule tout l'email dans une table, et j'aimerais qu'il ait une largeur qui soit jusqu'à 98% de la largeur disponible, mais pas plus de 800 pixels. Pareil:
<table style="width:98%; max-width:800px;">
mais je ne le fais pas de cette façon, puisque selon ce Outlook 2007 ne supporte pas la propriété CSS width.
à la place, je fais ce:
<table width="98%">
y a-t-il un moyen de définir aussi une largeur maximale sans s'appuyer sur CSS?
5 réponses
Oui, il y a une façon d'imiter max-width à l'aide d'une table, ce qui vous donne à la fois responsive et Outlook-friendly layout. De plus, cette solution ne nécessite pas de commentaires conditionnels.
supposons que vous voulez l'équivalent d'un centré div avec max-width de 350px . Vous créez une table, définissez la largeur à 100% . La table a trois cellules dans une ligne. Définir la largeur du centre TD à 350 (en utilisant le HTML width attribut, pas CSS), et voilà.
si vous voulez que votre contenu soit aligné à gauche au lieu d'être centré, laissez la première cellule vide.
exemple:
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="350">The width of this cell should be a maximum of
350 pixels, but shrink to widths less than 350 pixels.
</td>
<td></td>
</tr>
</table>
dans le jsfiddle je donne à la table une frontière afin que vous puissiez voir ce qui se passe, mais évidemment vous ne voudriez pas un dans la vraie vie:
il y a un truc que vous pouvez faire pour Outlook 2007 en utilisant des commentaires HTML conditionnels.
Le code ci-dessous va s'assurer que la table Outlook est 800px large, son pas Max-largeur, mais il fonctionne mieux que de laisser la portée de la table à travers la fenêtre entière.
<!--[if gte mso 9]>
<style>
#tableForOutlook {
width:800px;
}
</style>
<![endif]-->
<table style="width:98%;max-width:800px">
<!--[if gte mso 9]>
<table id="tableForOutlook"><tr><td>
<![endif]-->
<tr><td>
[Your Content Goes Here]
</td></tr>
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
<table>
La réponse courte: non.
la longue réponse:
formats fixes fonctionnent mieux pour les e-mails HTML. D'après mon expérience, vous feriez mieux de faire semblant que c'est 1999 quand il s'agit de courriels HTML. Soyez explicite et utilisez les attributs HTML (width= "650") lorsque cela est possible dans vos définitions de Tableau, pas CSS (style="width:650px"). Utiliser des largeurs fixes, pas de pourcentages. Une table largeur de 650 pixels de large est un pari sûr. Utilisez css inline pour définir les propriétés du texte.
il ne s'agit pas de ce qui fonctionne dans les" emails HTML", mais plutôt de la pléthore de clients de messagerie et de leur capacité limitée (et parfois délibérément dans le cas de Gmail, Hotmail etc) à rendre HTML.
un peu tard pour la fête, mais ça va le faire. J'ai laissé l'exemple à 600, car c'est ce que la plupart des gens vont utiliser:
semblable à L'exemple de Shay sauf que ce inclut aussi la largeur max pour travailler sur le reste des clients qui ont le soutien, aussi bien qu'une deuxième méthode pour empêcher l'expansion (requête de médias) qui est nécessaire pour Outlook '11.
dans la tête:
<style type="text/css">
@media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
</style>
dans le corps:
<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>
main content here
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
voici un autre exemple de ce qui est utilisé: e-mails de confirmation de commande réactifs pour les appareils mobiles?
C'est la solution qui a fonctionné pour moi
https://gist.github.com/elidickinson/5525752#gistcomment-1649300 , merci à @philipp-klinz
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->
<!-- PLACE CONTENT HERE -->
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
</table>