134

広く使用されているすべての電子メールクライアントで正しく表示されるHTML電子メールを作成しようとしています。メール全体をテーブルにラップしています。使用可能な幅の最大98％で、800ピクセル以下の幅にしたいのですが。このような： <table style="width:98%; max-width:800px;">

しかし、このOutlook 2007によると、CSS widthプロパティをサポートしていないため、私はそのようにはしていません。

代わりに、私はこれを行っています： <table width="98%">

CSSに依存せずに最大幅も設定する方法はありますか？

4

5 に答える 5

276

はい、テーブルを使用してエミュレートする方法がありmax-widthます。これにより、応答性が高く、Outlookに適したレイアウトが得られます。さらに、このソリューションは条件付きコメントを必要としません。

の中心divに相当するものが必要だとします。テーブルを作成し、幅をに設定します。テーブルには3つのセルが並んでいます。中心の幅を（ CSSではなくHTML属性を使用して）に設定すると、そこに移動します。max-width350px100%TD350width

コンテンツを中央揃えではなく左揃えにする場合は、最初の空のセルを省略します。

例：

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

于 2014-06-30T22:32:13.523 に答える
36

条件付きHTMLコメントを使用してOutlook2007に対して実行できるトリックがあります。
以下のコードは、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>
于 2011-09-01T19:27:39.187 に答える
14

簡単な答え：いいえ。

長い答え：

固定形式は、HTMLメールに適しています。私の経験では、HTMLメールに関しては1999年のふりをするのが最善です。明示的にし、CSS（style = "width：650px"）ではなく、テーブル定義で可能な限りHTML属性（width = "650"）を使用してください。固定幅を使用し、パーセンテージは使用しないでください。幅650ピクセルのテーブル幅は安全な方法です。インラインCSSを使用してテキストプロパティを設定します。

「HTMLメール」で何が機能するかは問題ではなく、多数のメールクライアントと、HTMLをレンダリングする機能が制限されている（Gmail、Hotmailなどの場合は意図的にそうなることもあります）。

于 2010-03-11T15:24:43.313 に答える
5

パーティーに少し遅れましたが、これで終わりです。ほとんどの人が使用するので、例を600のままにしました。

Shayの例と同様ですが、これには、サポートされている残りのクライアントで動作するmax-widthと、Outlook '11に必要な拡張（メディアクエリ）を防ぐための2番目の方法も含まれます。

頭の中で：

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

これが使用されている別の例を次に示します。モバイルデバイスのレスポンシブ注文確認メール？

于 2014-02-10T15:36:25.143 に答える
1

これは私のために働いた解決策です

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>
于 2016-05-12T21:52:18.873 に答える