web-dev-qa-db-ja.com

レスポンシブテーブルデザインを実現するために、HTMLメールのtdでdisplay：blockを使用することは可能ですか？

この素晴らしい記事では、モバイルブラウザに合わせて拡張できるレスポンシブテーブルを作成する方法について説明します。

今私は同じテクニックをhtmlメールに適用しようとしていますがdisplay:blockhtmlメールでは機能しないようです。

問題を再現するには：

  1. 次のコードをHTMLページとして保存します。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        @media only screen and (max-width: 760px), screen and (max-device-width: 480px)  {
            /* Force table to not be like tables anymore */
            table, td, tbody, tr{
                    display: block;
                    width:100%;
                    padding:0;
                    clear:both;
            }
            td {
                    /* Behave  like a "row" */
                    position: relative !important;
            }
        }
    </style>
</head>
<body>
    <table style="width:100%;">
        <tr>
            <td style="border:1px solid red;">1/1</td>
            <td style="border:1px solid red;">1/2</td>
            <td style="border:1px solid red;">1/3</td>
        </tr>
        <tr>
            <td style="border:1px solid red;">2/1</td>
            <td style="border:1px solid red;">2/2</td>
            <td style="border:1px solid red;">2/3</td>
        </tr>
    </table>
</body>
</html>

  2. Safariでページを開く

  3. ウィンドウのサイズを変更して、ウィンドウサイズを小さくするとテーブルがどのように変化するかを確認します

  4. 押す CMD+i またはFile->MailHTMLメールを作成するためのこのページのコンテンツ

  5. メールウィンドウのサイズを変更して、テーブルのサイズが正しく変更されていることを確認します

  6. 自分宛にメールを送信して開きます。

  7. ここで、電子メールが実際にメディアクエリに応答するが、テーブルのスタイルを変更できなかったことに注目してください。

実際にテーブルを正しく表示するメールクライアントをまだ見つけていません。これは行き止まりですか、それとも回避策のアイデアがありますか？

htmlcsshtml-tablemedia-querieshtml-email
12
Chris

受け入れられた答えはいくつかの素晴らしい情報を提供しますが、それは質問に直接対処していません。私は最近レスポンシブメールを試していて、他の人が役立つかもしれないいくつかの良い解決策を考え出しました。さあ行こう...

質問に答えるには、display:block;を使用して、一部のモバイルデバイス（Android、iOS、Kindle）でテーブルの列を行として動作させることができます。

これは、モバイルデバイスで2列のレイアウトスタック（右の列の上に左の列）を作成する方法を示す例です。

[〜＃〜] html [〜＃〜]

<table class="deviceWidth" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
  <tr>
    <td width="50%" align="right" class="full">
      <p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
        <a href="#"><img src="http://placehold.it/440x440&text=LEFT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>  
      </p>                  
    </td>
    <td width="50%" align="left" class="full">
        <a href="#"><img src="http://placehold.it/440x440&text=RIGHT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>                     
    </td>
  </tr>
</table>

[〜＃〜] css [〜＃〜]

@media only screen and (max-width: 640px)  {
    body[yahoo] .deviceWidth {width:440px!important; }  T 

    body[yahoo] .full {
        display:block;
        width:100%;
    }
}

注：body[yahoo]セレクター Yahooがメディアクエリをレンダリングしないようにします 。私の電子メールのbody要素にはyahoo="fix"属性があります。

上記のCSSは、画面の幅が640px未満の場合、クラスがtdのfullsはdisplay:blockのwidth:100%である必要があることを示しています。

さて、少し凝ったものにしましょう。左側の列を右側の列の下にスタックしたい場合があります。これを行うには、含まれているtableでdir="rtl"を使用して、列の順序を反転します。 CSSは同じままです。新しいHTMLは次のとおりです。

[〜＃〜] html [〜＃〜]

<table class="deviceWidth" dir="rtl"  width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
  <tr>
    <td width="50%" dir="ltr" align="right" class="full">
      <p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
        <a href="#"><img src="http://placehold.it/440x440&text=RIGHT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a> 
      </p>                  
    </td>
    <td width="50%" dir="ltr" align="left" class="full">
        <a href="#"><img src="http://placehold.it/440x440&text=LEFT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>                      
    </td>
  </tr>
</table>

dir="rtl"を追加することで、列の順序を逆にするように指示しています。最初の列（HTMLのフロー内）が右側に表示され、2番目の列（HTML内）が左側に表示されています。 640pxより小さい画面の場合、最初に最初の列（右側の列）が表示され、次に2番目の列（左側の列）が表示されます。

これが 完全なHTMLとCSS で、GmailとiOS5のスクリーンショットが添付されています。

GmailiOS 5Android 4

14
Brett DeWoody

私はそれを機能させることができました、これが結果です： https://litmus.com/pub/d9ac198

これは、tdを行のように動作させるために使用するコードです。

table[class="magic"],
table[class="magic"] tbody,
table[class="magic"] tr,
table[class="magic"] td {
    display: block !important;
    width: 100%;
}
2
Maxim

これを参照することをお勧めします： http://www.campaignmonitor.com/css/

あまり最新ではありませんが、電子メールのcssサポートという点では優れたリソースです。残念ながら、メールテンプレートを作成するときは、ブラウザだけでなく、さまざまなクライアントを考慮する必要があります。 Outlookとそれらが提供するCSSサポートは悪名高いほど貧弱です。

その上、Gmailのようなメールプロバイダーはドキュメントの特定の部分（ヘッドタグなど）を削除する傾向があるため、基本的なサポートが非常に不十分なオーディエンス（電子メールクライアント）にレスポンシブデザインの概念を適用することは非常に困難になりますcss。

2
Luca

もう1つのアプローチは、1つの電子メールで2つのデザインを操作することです。1つはデスクトップリーダー用、もう1つはモバイルリーダー用です。 ここに示されています 。

1
cptstarling

私はまったく同じ問題を抱えています！ iOSデバイスのメールでのみ機能すると思いましたが、実際に送信するまでは、まさにあなたが言っているとおりに機能します。

@Luca、サポートが良くないことはわかっていますが、メディアクエリはほとんど無視されているので、最新の電子メールクライアントで電子メールの見栄えを少し良くしたい場合は、追加するのがいいでしょう。 Outlookやその他のユーザーは、メディアクエリ/レスポンシブテーブルがなくても、「通常の」HTMLメールを受信します。

0
Dinis Correia

メディアクエリを使用して、このようなモバイルデバイスのtd要素をスタックすることがわかりました

td[class="stack-content"] {display:block !important}

明らかにdisplay：blockプロパティをサポートしていないWindows Phone 7を除いて、ほとんどのデバイスで機能するようです。

0
heyhugo