HTML 이메일에서 작동하는 CSS max-width에 해당하는 것이 있습니까?

널리 사용되는 모든 이메일 클라이언트에서 제대로 표시되는 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( widthCSS가 아닌 HTML 속성을 사용하여 ) 설정하면됩니다.

콘텐츠를 가운데가 아닌 왼쪽으로 정렬하려면 첫 번째 빈 셀을 생략하십시오.

예:

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

조건부 html 주석을 사용하여 Outlook 2007에서 수행 할 수있는 트릭이 있습니다.
아래 코드는 Outlook 테이블의 너비가 최대 너비가 아닌 800px인지 확인하지만 전체 창에 걸쳐 표를 두는 것보다 더 잘 작동합니다.

<!--[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 이메일에 더 적합합니다. 제 경험상 HTML 이메일에 관해서는 1999 년을 가장하는 것이 가장 좋습니다. 가능하면 CSS (style = "width : 650px")가 아닌 테이블 정의에서 명시 적으로 HTML 속성 (width = "650")을 사용하세요. 백분율없이 고정 된 너비를 사용하십시오. 너비가 650 픽셀 인 테이블 너비는 안전한 방법입니다. 인라인 CSS를 사용하여 텍스트 속성을 설정합니다.

"HTML 이메일"에서 작동하는 문제가 아니라 과다한 이메일 클라이언트와 HTML을 렌더링하는 제한된 (때로는 Gmail, Hotmail 등의 경우 일부러 그렇게) 기능이 문제입니다.

파티에 조금 늦었지만 이렇게하면 끝납니다. 대부분의 사람들이 사용하는 600으로 예제를 남겼습니다.

Shay의 예와 유사 하지만 지원되는 나머지 클라이언트에서 작동하는 최대 너비 와 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]-->

사용중인 또 다른 예는 다음과 같습니다. 모바일 장치 용 반응 형 주문 확인 이메일?

이것은 나를 위해 일한 솔루션입니다.

@ philipp-klinz 덕분에 https://gist.github.com/elidickinson/5525752#gistcomment-1649300

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