Existe-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 de messagerie largement utilisés. J'emballe tout l'e-mail dans un tableau et j'aimerais qu'il ait une largeur pouvant atteindre 98% de la largeur disponible, mais pas plus de 800 pixels. Comme ça: <table style="width:98%; max-width:800px;">

Mais je ne le fais pas de cette façon, car selon cet Outlook 2007 ne prend pas en charge la propriété CSS width.

Au lieu de cela, je fais ceci: <table width="98%">

Existe-t-il un moyen de définir également une largeur maximale sans compter sur CSS?

Oui, il existe un moyen d'émuler à l' max-widthaide d'un tableau, vous offrant ainsi une mise en page à la fois réactive et conviviale pour Outlook. De plus, cette solution ne nécessite pas de commentaires conditionnels.

Supposons que vous vouliez l'équivalent d'un centré divavec max-widthde 350px. Vous créez un tableau, définissez la largeur sur 100%. Le tableau comporte trois cellules d'affilée. Réglez la largeur du centre TDsur 350(en utilisant l' widthattribut HTML , pas CSS), et c'est parti.

Si vous voulez que votre contenu soit aligné à gauche au lieu d'être centré, laissez simplement de côté 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 au tableau une bordure pour que vous puissiez voir ce qui se passe, mais évidemment vous n'en voudriez pas dans la vraie vie:

http://jsfiddle.net/YcwM7/

Il existe une astuce que vous pouvez faire pour Outlook 2007 en utilisant des commentaires html conditionnels.
Le code ci-dessous garantira que la table Outlook a une largeur de 800 pixels, sa largeur n'est pas maximale, mais cela fonctionne mieux que de laisser la table s'étendre sur toute la fenêtre.

<!--[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 réponse longue:

Les formats fixes fonctionnent mieux pour les e-mails HTML. D'après mon expérience, il vaut mieux prétendre que nous sommes en 1999 en ce qui concerne les e-mails HTML. Soyez explicite et utilisez des attributs HTML (width = "650") dans la mesure du possible dans vos définitions de table, pas CSS (style = "width: 650px"). Utilisez des largeurs fixes, pas de pourcentages. Une largeur de table de 650 pixels de large est une valeur sûre. Utilisez le CSS en ligne pour définir les propriétés du texte.

Ce n'est pas une question de ce qui fonctionne dans les «e-mails HTML», mais plutôt la pléthore de clients de messagerie et leur capacité limitée (et parfois délibérément dans le cas de Gmail, Hotmail, etc.) à rendre le HTML.

Un peu tard à la fête, mais cela le fera. J'ai laissé l'exemple à 600, car c'est ce que la plupart des gens utiliseront:

Similaire à l'exemple de Shay, sauf que cela inclut également max-width pour travailler sur le reste des clients qui ont un support, ainsi qu'une deuxième méthode pour empêcher l'expansion (requête multimédia) 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 d'utilisation: des 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">&nbsp;</td></tr>
     <tr>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
        <td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->

             <!-- PLACE CONTENT HERE -->

        </td>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
    </tr>
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
</table>