Gibt es ein Äquivalent von CSS max-width, das in HTML-E-Mails funktioniert?

Ich versuche, eine HTML-E-Mail zu erstellen, die in allen weit verbreiteten E-Mail-Clients ordnungsgemäß angezeigt wird. Ich wickle die gesamte E-Mail in eine Tabelle ein und möchte eine Breite von bis zu 98% der verfügbaren Breite, jedoch nicht mehr als 800 Pixel. So was: <table style="width:98%; max-width:800px;">

Aber ich bin es nicht zu tun , dass die Art und Weise, da nach diesem Outlook 2007 nicht die CSS - Eigenschaft width unterstützen.

Stattdessen mache ich das: <table width="98%">

Gibt es eine Möglichkeit, auch eine maximale Breite festzulegen, ohne sich auf CSS zu verlassen?

Ja, es gibt eine Möglichkeit, max-widthmithilfe einer Tabelle zu emulieren , sodass Sie sowohl ein ansprechendes als auch ein Outlook-freundliches Layout erhalten. Darüber hinaus erfordert diese Lösung keine bedingten Kommentare.

Angenommen, Sie möchten das Äquivalent eines zentrierten divmit max-widthvon 350px. Sie erstellen eine Tabelle und setzen die Breite auf 100%. Die Tabelle enthält drei Zellen in einer Reihe. Stellen Sie die Breite des Zentrums TDauf 350(mithilfe des HTML- widthAttributs, nicht CSS) ein und los geht's.

Wenn Sie möchten, dass Ihr Inhalt links statt zentriert ausgerichtet wird, lassen Sie einfach die erste leere Zelle weg.

Beispiel:

<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> 

In der jsfiddle gebe ich der Tabelle einen Rand, damit Sie sehen können, was los ist, aber offensichtlich möchten Sie im wirklichen Leben keinen:

http://jsfiddle.net/YcwM7/

Es gibt einen Trick, den Sie für Outlook 2007 mithilfe von bedingten HTML-Kommentaren ausführen können.
Der folgende Code stellt sicher, dass die Outlook-Tabelle 800 Pixel breit ist, nicht die maximale Breite, aber besser funktioniert, als die Tabelle über das gesamte Fenster erstrecken zu lassen.

<!--[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>

Die kurze Antwort: nein.

Die lange Antwort:

Feste Formate funktionieren besser für HTML-E-Mails. Nach meiner Erfahrung tun Sie am besten so, als wäre es 1999, wenn es um HTML-E-Mails geht. Seien Sie explizit und verwenden Sie HTML-Attribute (width = "650"), wo immer dies in Ihren Tabellendefinitionen möglich ist, nicht CSS (style = "width: 650px"). Verwenden Sie feste Breiten, keine Prozentsätze. Eine Tischbreite von 650 Pixel ist eine sichere Sache. Verwenden Sie Inline-CSS, um Texteigenschaften festzulegen.

Es geht nicht darum, was in "HTML-E-Mails" funktioniert, sondern um die Vielzahl von E-Mail-Clients und deren eingeschränkte (und manchmal absichtlich bei Google Mail, Hotmail usw.) Fähigkeit, HTML zu rendern.

Etwas spät zur Party, aber das wird es schaffen. Ich habe das Beispiel bei 600 belassen, da dies die meisten Leute verwenden werden:

Ähnlich wie in Shays Beispiel, mit der Ausnahme, dass dies auch die maximale Breite für die übrigen Clients umfasst, die Unterstützung bieten, sowie eine zweite Methode, um die für Outlook '11 erforderliche Erweiterung (Medienabfrage) zu verhindern.

Im Kopf:

  <style type="text/css">
    @media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
  </style>

Im Körper:

<!--[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]-->

Hier ist ein weiteres Beispiel: Verwendete E-Mails zur Auftragsbestätigung für mobile Geräte?

Dies ist die Lösung, die für mich funktioniert hat

https://gist.github.com/elidickinson/5525752#gistcomment-1649300 , danke an @ 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>