4

HTML メール ニュースレターの作成では、次のような構造をよく使用します。

<table width="244" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffcc">
<tr>
  <td>
        <table border="0" align="left">
        <tbody>
        <tr>
              <td bgcolor="#FFCCCC">text in the table cell.<br>and another line of text.<br>and a third line.</td>
        </tr>
        </tbody>
        </table>
Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence.</td>
</tr>

ブラウザで表示すると、結果は次のようになります。

ブラウザで表示

ただし、Outlook 2013 でレンダリングすると、メイン (黄色) のテーブルの一番左のテキストが途切れます。

Outlook 2013 で表示

これについての説明または回避策はありますか?

(通常、テキストの代わりに画像を内側 (ピンク色) のテーブルに配置します。これにより、メイン (黄色) のテキストが画像の周りを流れているように見えるデザインが可能になります。画像であろうとテキストであろうと、結果は同じです。メイン (黄色) のテーブルのテキストは、ここに示すように切り詰められています)。

4

3 に答える 3

5

私のコードでは、これはすべてのクライアントで機能します。すべてのクライアントに対してリトマスでテスト済み:

<table cellspacing="0" cellpadding="0" width="560" align="left" border="0">
<tbody>
    <tr>
        <td align="left">   
            <table cellspacing="0" cellpadding="0" align="left">
                <tbody>
                    <tr>
                        <!-- spacer for the top of the image -->
                        <td align="left" colspan="2">
                            <img src="spacer.gif" height="5" alt="spacer" style="display:block; margin:0px; border:0px;" align="left" />
                        </td>
                    </tr>
                    <tr>
                        <!-- the image or text -->
                        <td align="left">
                            <img src="imagesrc" alt="imagealt" style="display:block; margin:0px; border:0px;" />
                        </td>

                        <!-- spacer for the right of the image -->
                        <td align="left">
                            <img src="spacer.gif" width="11" alt="spacer" style="display:block; margin:0px; border:0px;" />
                        </td>
                    </tr>
                    <tr>

                        <!-- spacer for the bottom of the image -->
                        <td colspan="2" align="left">
                            <img src="spacer.gif" height="11" alt="spacer" style="display:block; margin:0px; border:0px;" />
                        </td>
                    </tr>
                </tbody>
            </table>

            <!-- here your tekst -->
            <div style="margin:0px; padding:0px; mso-line-height-rule: exactly; color:#000000; font-family:Verdana, Arial; font-size:12px; line-height:20px; display:block;">Hello. This is sample text. This is another sentence. Hello. This is sample text.</div>
        </td>
    </tr>
</tbody>
</table>
于 2013-03-26T12:49:45.167 に答える
1

受け入れられた解決策（align= "left"見出し/親テーブルへの追加）が機能しない場合があります（私の場合、複数のネストされたテーブルを使用）：

修正なしの左揃えの表

mso-table-rspace左揃えのテーブルに追加するとうまくいきました：

左揃えの表と修正

<table border="0" cellpadding="0" cellspacing="0" align="left" style="mso-table-lspace:0pt; mso-table-rspace:7pt;">

于 2016-05-03T12:09:22.877 に答える
-3

Outlook 2013 の何が問題なのかはわかりませんが、div 構造で同じレイアウトを実現することができます

HTML:

<div class="outer">
  <div class="first">text in the table cell.<br>and another line of text.<br>and a third line.</div>
  <div class="second">Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence.</div>
</div>

CSS:

.outer {
  width : 50%;
  height : 50%;
  background-color: green;
}

.first {
  background-color: red;
  float : left;
}

.second {
  background-color: yellow;
}

デモリンク

于 2013-03-24T19:20:15.433 に答える