Czy istnieje odpowiednik maksymalnej szerokości CSS, który działa w e-mailach HTML?

Próbuję utworzyć wiadomość e-mail w formacie HTML, która będzie poprawnie wyświetlana we wszystkich powszechnie używanych klientach poczty e-mail. Zawijam całą wiadomość e-mail w tabeli i chciałbym, aby miała szerokość do 98% dostępnej szerokości, ale nie większą niż 800 pikseli. Lubię to: <table style="width:98%; max-width:800px;">

Ale nie robię tego w ten sposób, ponieważ zgodnie z tym Outlook 2007 nie obsługuje właściwości szerokości CSS.

Zamiast tego robię to: <table width="98%">

Czy istnieje sposób na ustawienie maksymalnej szerokości bez polegania na CSS?

Tak, istnieje sposób na emulację max-widthprzy użyciu tabeli, co zapewnia zarówno responsywny, jak i przyjazny dla programu Outlook układ. Co więcej, rozwiązanie to nie wymaga warunkowych komentarzy.

Załóżmy, że potrzebujesz odpowiednika wyśrodkowanego divz max-widthz 350px. Tworzysz tabelę, ustawiasz szerokość na 100%. Tabela zawiera trzy komórki w rzędzie. Ustaw szerokość środka TDna 350(używając HTMLwidth atrybutu , a nie CSS) i gotowe.

Jeśli chcesz, aby zawartość była wyrównana do lewej, a nie wyśrodkowana, po prostu pomiń pierwszą pustą komórkę.

Przykład:

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

W jsfiddle daję obramowanie tabeli, abyś mógł zobaczyć, co się dzieje, ale oczywiście nie chciałbyś takiego w prawdziwym życiu:

http://jsfiddle.net/YcwM7/

Istnieje sztuczka, którą można zrobić w programie Outlook 2007, używając warunkowych komentarzy HTML.
Poniższy kod upewni się, że tabela Outlooka ma szerokość 800 pikseli, a nie maksymalną, ale działa lepiej niż pozostawienie tabeli w całym oknie.

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

Krótka odpowiedź: nie.

Długa odpowiedź:

Stałe formaty działają lepiej w przypadku wiadomości e-mail w formacie HTML. Z mojego doświadczenia wynika, że ​​najlepiej udawać, że jest rok 1999, jeśli chodzi o e-maile HTML. Podaj wyraźne informacje i używaj atrybutów HTML (width = "650"), jeśli to możliwe, w definicjach tabel, a nie CSS (style = "width: 650px"). Używaj stałych szerokości, bez wartości procentowych. Szerokość stołu o szerokości 650 pikseli to bezpieczny zakład. Użyj wbudowanego CSS, aby ustawić właściwości tekstu.

Nie chodzi o to, co działa w „e-mailach HTML”, ale raczej o mnogość klientów poczty e-mail i ich ograniczoną (a czasami celowo tak w przypadku Gmaila, Hotmaila itp.) Możliwość renderowania HTML.

Trochę za późno na imprezę, ale to załatwi sprawę. Zostawiłem przykład na 600, ponieważ większość ludzi będzie tego używać:

Podobnie jak w przykładzie Shaya, z tym wyjątkiem, że obejmuje to również max-width do pracy z resztą klientów, którzy mają wsparcie, a także drugą metodę zapobiegania rozszerzaniu (zapytanie o media), które jest potrzebne w Outlook'11.

W głowie:

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

W ciele:

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

Oto kolejny przykład tego w użyciu: Responsywne e-maile z potwierdzeniem zamówienia na urządzenia mobilne?

To rozwiązanie, które mi się sprawdziło

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