Czy istnieje odpowiednik CSS max-width, który działa w wiadomościach HTML?

Próbuję stworzyć e-mail HTML, który będzie wyświetlany poprawnie we wszystkich powszechnie używanych klientach pocztowych. Zawijam cały e-mail w tabelę i chciałbym, aby miał szerokość, która wynosi do 98% dostępnej szerokości, ale nie większą niż 800 pikseli. W ten sposób: <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 CSS width.

Zamiast tego, robiÄ™ to: <table width="98%">

Czy jest jakiś sposób na ustawienie max-width bez polegania na CSS?

Author: Tim Goodman, 2010-03-11
Source

5 answers

Tak, istnieje sposób na emulację max-width za pomocą tabeli, dając w ten sposób zarówno responsywny, jak i przyjazny dla programu Outlook układ. Co więcej, rozwiązanie to nie wymaga komentarzy warunkowych.

Załóżmy, że chcesz odpowiednika wyśrodkowanego div z max-width z 350px. Tworzysz tabelę, ustawiasz szerokość na 100%. Tabela zawiera trzy komórki z rzędu. Ustaw szerokość środka TD na 350 (używając atrybutu HTML width, a nie CSS) i gotowe.

Jeśli chcesz, aby Twoje treści wyrównany w lewo zamiast wyśrodkowany, 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ę tabelce obramowanie, żebyś mógł zobaczyć o co chodzi, ale oczywiście nie chciałbyś takiej w prawdziwym życiu:

Http://jsfiddle.net/YcwM7/

 174
Author: Mark Nugent,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-23 15:40:19

Istnieje sztuczka, którą możesz zrobić dla programu Outlook 2007 za pomocą warunkowych komentarzy html.
Poniższy kod upewni się, że tabela programu Outlook jest szeroka na 800px, nie ma maksymalnej szerokości, ale działa lepiej niż pozwalanie na rozciąganie tabeli przez całe okno.

<!--[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>
 33
Author: Shay Erlichmen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-01 19:27:39

Krótka odpowiedź: Nie.

Długa odpowiedź:

Poprawione formaty działają lepiej dla wiadomości HTML. Z mojego doświadczenia najlepiej udawać, że jest rok 1999, jeśli chodzi o e-maile HTML. Bądź jawny i używaj atrybutów HTML (width="650") tam, gdzie jest to możliwe w definicjach tabeli, a nie CSS (style="width:650PX"). Użyj stałych szerokości, bez procentów. Stół o szerokości 650 pikseli to Bezpieczny zakład. Użyj wbudowanego CSS do ustawiania właściwości tekstu.

To nie jest kwestia tego co działa w " HTML e-maile", ale raczej mnogość klientów poczty e-mail i ich ograniczona (a czasami celowo tak w przypadku Gmaila, hotmaila itp.) zdolność do renderowania HTML.

 12
Author: Diodeus - James MacFarlane,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-03-11 16:00:38

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

Podobnie jak w przykładzie shaya, z tym wyjątkiem zawiera również max-width do pracy na pozostałych klientach, które mają wsparcie, a także drugą metodę zapobiegania ekspansji (Zapytanie o media), która jest potrzebna dla Outlooka '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: Responsive order e-maile potwierdzające dla urządzeń mobilnych?

 4
Author: John,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:10:45

To jest rozwiązanie, które zadziałało dla mnie

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>
 0
Author: henry,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-12 20:10:35