HTML 이메일에서 작동하는 CSS 최대 너비에 해당합니까?

HTML 이메일에서 작동하는 CSS 최대 너비에 해당합니까?

---

널리 사용되는 모든 이메일 클라이언트에 올바르게 표시되는 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%. 테이블에는 3 개의 셀이 연속으로 있습니다. 중심의 너비 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가 아닌 테이블 정의에서 HTML 속성 (width = "650")을 명시 적으로 사용하십시오 (style = "width : 650px"). 고정 너비를 사용하고 백분율은 사용하지 않습니다. 너비가 650 픽셀 인 테이블 너비가 안전합니다. 인라인 CSS를 사용하여 텍스트 속성을 설정하십시오.

"HTML 전자 메일"에서 작동하는 것은 문제가 아니라 많은 전자 메일 클라이언트와 제한적인 (때때로 Gmail, Hotmail 등의 경우) HTML을 렌더링하는 능력이 있습니다.

---

파티에 늦었지만, 이렇게하면 끝납니다. 대부분의 사람들이 사용할 것이므로 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>

참고 URL : https://stackoverflow.com/questions/2426072/is-there-an-equivalent-of-css-max-width-that-works-in-html-emails