12

いくつかのテーブルを作成しようとしてfloat: leftいますが、大きな問題が発生しました。Outlook は float をサポートしていません。さて、私は table align などを使用しようとしましたが、うまくいきませんでした。テーブルは、隣同士ではなく、互いの下に表示されます。これについて何かできることはありますか？

PS: 他のデバイスでも問題なく動作します。唯一の Outlook です。また、他のいくつかのものを壊してしまうため、各テーブルに td を与えることはできません。

マークアップ:

<table class="products">
   <tr>
      <td align="left" class="test">
         <!-- Product 1  -->
         <table align="center">
            <tr>
               <td class="product">
                  <a href="#">
                     <img src="#"/>
                  </a>
               </td>
            </tr>
         </table>
         <!-- Product 2  -->
         <table align="center">
            <tr>
               <td class="product">
                  <a href="#">
                     <img src="#"/>
                  </a>
               </td>
            </tr>
         </table>
         <!-- Product 3 -->
         <table align="center">
            <tr>
               <td class="product">
                  <a href="#">
                     <img src="#"/>
                  </a>
               </td>
            </tr>
         </table>
         <span class="clear"></span>    
      </td>
   </tr>
 </table>
4

6 に答える 6

29

CSS ではなく width="" を使用して、整列された各テーブルの幅を設定します。

動作する例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    table td { border-collapse: collapse; }
    .msoFix { mso-table-lspace:-1pt; mso-table-rspace:-1pt; }
  </style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF">


<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <div style="max-width:640px !important;">

        <table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#CCCCCC">
          <tr>
            <td width="15" bgcolor="454545">&nbsp;</td>
            <td width="290" bgcolor="454545" align="left" style="padding: 0px;">&nbsp;<br>Table 1<br>...<br>&nbsp;
            </td>
            <td width="15" bgcolor="454545">&nbsp;</td>
          </tr>
        </table>

        <table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#EEEEEE">
          <tr>
            <td width="15" bgcolor="959595">&nbsp;</td>
            <td width="290" bgcolor="959595" align="left" style="padding: 0px;">&nbsp;<br>Table 2<br>...<br>&nbsp;
            </td>
            <td width="15" bgcolor="959595">&nbsp;</td>
          </tr>
        </table>

      </div>
    </td>
  </tr>
</table>

</body></html>

また、Outlook は、整列されたテーブル間に 4 ～ 5 ピクセルのギャップを置きます。これを追加すると、約 1px に縮小されます。

<style type="text/css">
   .msoFix {
      mso-table-lspace:-1pt;
      mso-table-rspace:-1pt;
   }
</style>

それを完全に取り除くには、テーブルに罫線を追加する必要があります (別の Outlook の奇抜なハック)。

于 2013-07-16T13:04:02.777 に答える
5

すべてのサブtableを自分tdのアウターに入れるだけtableです。が隣り合っているように、tds も隣り合っていtableます。

HTML メールを作成しようとすると、Code like it's 1997 .

于 2013-07-16T10:32:41.077 に答える
2

Outlookで2つのテーブルが「応答」していない（1つが互いに下にある）ことに耐えることができる場合、これは私にとってはうまくいきました：

........
<!--[if gte mso 9]>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>
<![endif]--> 

<!-- table 1 goes here -->

<!--[if gte mso 9]>
    </td>
    <td>
<![endif]-->

<!-- table 12 goes here -->

<!--[if gte mso 9]>
   </td>
  </tr>
</table>
<![endif]-->
........
于 2015-01-27T10:04:12.417 に答える
1

次のようなオンライン リソースを使用します。

HTML メールのコーディング方法

HTML のレンダリングに関して言えば、ほとんどの電子メール クライアントは原始的であり、整形式の HTML 要素の多くを壊してしまいます。

次の説明が役立つ場合があります。

HTML メールのデザインにはどのようなガイドラインがありますか?

基本的なヒント:

  • レイアウトにはテーブルを使用します。
  • 最も幅の広いテーブルを最大 600px 幅に設定します。
  • JavaScript や Flash を使用しないでください
  • 一部のメール クライアントは CSS を破棄するため、スタイル タグで CSS を使用しないでください。
  • インライン CSS スタイルのみを使用します。
于 2013-07-16T10:31:40.250 に答える