web-dev-qa-db-ja.com

Outlookのfloatに相当

私は。。をしようとしています float: left一部のテーブルですが、大きな問題が発生しました。Outlookは浮動小数点をサポートしていません。さて、私はテーブルアラインなどを使用しようとしましたが、運がありませんでした。テーブルは並べて表示されるのではなく、横に並べて表示されます。これについて何かできることはありますか？

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>
htmlcssoutlookhtml-tablehtml-email
12
Thomas Teilmann

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の癖）。

27
John

すべてのサブtableを外側のtdの独自のtableに入れるだけです。 tdはお互いに偏っているので、tablesも同様です。

HTMLメールを作成しようとすると、 1997年のようなコード になります。

4
oezi

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]-->
........
2
stefan

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

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

HTMLのレンダリングに関しては、ほとんどの電子メールクライアントはプリミティブであり、整形式のHTML要素の多くを壊します。

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

HTMLメールデザインのガイドラインはありますか？

基本的なヒント：

  • レイアウトにはテーブルを使用します。
  • 最も幅の広いテーブルを最大600ピクセルの幅に設定します。
  • JavaScriptやFlashを使用しないでください
  • 一部のメールクライアントはCSSを破棄するため、スタイルタグでCSSを使用しないでください。
  • インラインCSSスタイルのみを使用します。
1
Zaheer Ahmed

Outlook.comはfloat属性を完全に除外しているようですが、display: inline-blockはサポートしています。
もちろん、これはdisplay:tableに依存しているため、テーブルを破壊する可能性が最も高くなりますが、divsで役立つ場合があります。

0
Protector one

OPがこの質問を投稿してから長い年月が経っていますが、それが必要な人にとって役立つことを願っています。

2列のレイアウトが必要で、それをOutlookでも機能させる場合は、widthを約45%各テーブル（安全のため、align="left"もあります）。幅を50％に指定すると、Outlook（独自の考え方を持つ）はそれを単一の列としてレンダリングします。

0
user9347891