Чи існує еквівалент максимальної ширини CSS, який працює в HTML-листах?

Я намагаюся створити HTML-адресу електронної пошти, яка відображатиметься належним чином у всіх широко використовуваних клієнтах електронної пошти. Я загортаю всю електронну пошту в таблицю, і хотілося б, щоб вона мала ширину до 98% від доступної ширини, але не більше 800 пікселів. Подобається це: <table style="width:98%; max-width:800px;">

Але я не роблю це так, оскільки згідно з цим Outlook 2007 не підтримує властивість ширини CSS.

Натомість я роблю це: <table width="98%">

Чи можна також встановити максимальну ширину, не покладаючись на CSS?

Так, є спосіб емуляції max-widthза допомогою таблиці, таким чином, ви отримуєте як чуйну, так і зручну для Outlook компонування. Більше того, це рішення не потребує умовних коментарів.

Припустимо , ви хочете еквівалент центрированное divз max-widthз 350px. Ви створюєте таблицю, встановлюєте ширину 100%. У таблиці є три комірки підряд. Встановіть ширину центру TDна 350(використовуючи widthатрибут HTML , а не CSS), і ви переходите.

Якщо ви хочете, щоб ваш вміст вирівнювався ліворуч, а не по центру, просто залиште першу порожню клітинку.

Приклад:

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

У jsfiddle я даю таблиці межу, щоб ви могли бачити, що відбувається, але очевидно, ви б не хотіли такого в реальному житті:

http://jsfiddle.net/YcwM7/

Існує хитрість, яку ви можете зробити для Outlook 2007, використовуючи умовні коментарі html.
Нижче наведений код гарантує, що таблиця Outlook шириною 800 пікселів, її не максимальна ширина, але вона працює краще, ніж дозволяти таблиці охоплювати все вікно.

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

Коротка відповідь: ні.

Довга відповідь:

Виправлені формати краще працюють для HTML-листів. На мій досвід, вам найкраще робити вигляд, що це 1999 рік, коли справа доходить до HTML-листів. Будьте явними і використовуйте атрибути HTML (width = "650"), де це можливо, у визначеннях таблиці, а не CSS (style = "width: 650px"). Використовуйте фіксовану ширину, без відсотків. Ширина столу шириною 650 пікселів - безпечна ставка. Використовуйте вбудований CSS для встановлення властивостей тексту.

Справа не в тому, що працює в "HTML-адресах електронної пошти", а в безлічі клієнтів електронної пошти та їх обмеженій (а іноді навмисно, у випадку Gmail, Hotmail тощо) здатності виводити HTML.

Трохи спізнившись на вечірку, але це вийде. Я залишив приклад у 600, тому що саме цим користуватиметься більшість людей:

Аналогічний приклад Шая, за винятком цього, включає також максимальну ширину для роботи на решті клієнтів, які мають підтримку, а також другий метод запобігання розширення (медіа-запит), необхідний для Outlook '11.

У голові:

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

В організмі:

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

Ось ще один приклад цього використання: чуйні повідомлення про підтвердження замовлення для мобільних пристроїв?

Це рішення, яке працювало на мене

https://gist.github.com/elidickinson/5525752#gistcomment-1649300 , завдяки @ 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>