HTML電子メール署名の固定サイズを維持するにはどうすればよいですか？

私は1つの電子メール署名に問題があります。これは基本的には見えない境界線を持つテーブルです（すべての要素の整列を簡単にするため）。 6行、3つに画像があり、最後には法的なものが1行に1つあります。 2行は異なります。それぞれに2つのセル（左右）があります。問題は、電子メールを送信すると、Outlook Web Appではうまく見えますが、Outlookデスクトップアプリケーションでは、2つの2セル行が左にまとめられてしまいます。私はそれを一定の位置と幅にしようとしましたが、私はそれを取り除くことができないようです。どのような提案、私は間違って何をするのですか？HTML電子メール署名の固定サイズを維持するにはどうすればよいですか？

<head> 
</head> 

<html> 
<body> 

    <table style="table-layout:fixed;margin-top:30px;margin-left:0px;margin-bottom:30px;width:95%;border:0"> 
    <!--1--> 
     <tr> 
      <td> 
       <table style="table-layout:fixed"> 
        <tr> 
         <td width="230">  
          <p> 
           <span style="color:#eb0008; font-size:20px; font-family:'Trebuchet MS',helvetica,San-Serif"><strong>%%displayname%%</strong></span><br /> 
           <span style="color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif">%%title%%</span> 
          </p> 
         </td> 

         <td width="340" > 
          <p style="color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif"> 
           <span style="color:#919191; font-size:13px;">mobile:</span> %%mobilenumber%%<br /> 
           <span style="color:#919191; font-size:13px;">email:</span> %%email%% 
          </p> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 

    <!--2--> 
     <tr> 
      <td> 

       <img style="margin:15px 0 8px 0" src="img" alt="linia" width="15" height="2" /> 

      </td> 
     </tr> 

    <!--3--> 
     <tr> 
      <td> 

       <img style="margin:0 0 10px 0" src="img" alt="technic logo" width="160" height="47" /> 

      </td> 
     </tr> 

    <!--4--> 
     <tr> 
      <td> 
       <table style="table-layout:fixed"> 
        <tr> 
         <td width="230px" overflow="hidden"> 
          <p style="color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif"> 



           Address1 

           <br /> Address1 

           <br /> Address1 

           <br /> Address1 



          </p> 

         </td> 

         <td width="340"> 



          <p style="color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif;"> 

           <span style="color:#919191;">nr telefonu:</span>number 

           <br /> 

           <span style="color:#919191;">nr fax:</span>number 

           <br /> 

           <span style="color:#919191;">del:</span>address 

           <br /> 

           <span style="color:#919191;">www:</span> <a href="http://www.google.com" target="_blank" style="color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif; text-decoration:none;">www.google.com</a> 

          </p> 





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

    <!--5-->  
     <tr> 
      <td> 

       <img style="margin:15px 0 8px 0" src="img" alt="linia" width="15" height="2" /> 

      </td> 
     </tr> 

    <!--6--> 
     <tr> 
      <td> 



       <p style="padding:0;margin:0; color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif"> 



        LEGAL STUFF 





       </p> 



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

</body> 
</html>

出典

2017-09-28 kjubus

あなたのテーブルの設計のためのスクリーンショットを追加してもらえますか？ –

こんにちはAnmol スクリーンショットはここにある： https://imgur.com/a/2DxI2 私はそれを複数の方法をやろうとしてきた（私はそれらのために、最初の1で2つのテーブルを入れ子になってきた理由です2セル行）。ここに余分な境界線が表示されます。 – kjubus

あなたのコードを更新して投稿しますが、 –

td height属性を使用して、余白を避ける

完璧なEmailerのを作成するためにあなたを助けることができるいくつかの事があります。
幅n％を与えないようにすると、ピクセルが優れたアプローチです。

<table style="width:600px;border:0" width="600" align="center"> 
 
    <!--1--> 
 
     <tr> 
 
      <td> 
 
       <table style="width:100%;"> 
 
        <tr> 
 
         <td width="230">  
 
          <p> 
 
           <span style="color:#eb0008; font-size:20px; font-family:'Trebuchet MS',helvetica,San-Serif"><strong>%%displayname%%</strong></span><br /> 
 
           <span style="color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif">%%title%%</span> 
 
          </p> 
 
         </td> 
 

 
         <td width="340" > 
 
          <p style="color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif"> 
 
           <span style="color:#919191; font-size:13px;">mobile:</span> %%mobilenumber%%<br /> 
 
           <span style="color:#919191; font-size:13px;">email:</span> %%email%% 
 
          </p> 
 
         </td> 
 
        </tr> 
 
       </table> 
 
      </td> 
 
     </tr> 
 

 
    <!--2--> 
 
     <tr> 
 
      <td> 
 

 
       <table style="width: 100%;"> 
 
       <tr> 
 
       <td height="15"></td> 
 
       </tr> 
 
       <tr> 
 
       <td><img src="https://dummyimage.com/200x200/000/fff" alt="linia" width="200"/></td> 
 
       </tr> 
 
       <tr> 
 
       <td height="8"></td> 
 
       </tr> 
 
       </table> 
 

 
      </td> 
 
     </tr> 
 

 
    <!--3--> 
 
     <tr> 
 
      <td> 
 

 
       <table style="width: 100%;"> 
 
       <tr> 
 
       <td height="15"></td> 
 
       </tr> 
 
       <tr> 
 
       <td><img src="https://dummyimage.com/200x200/000/fff" alt="linia" width="200"/></td> 
 
       </tr> 
 
       <tr> 
 
       <td height="8"></td> 
 
       </tr> 
 
       </table> 
 

 
      </td> 
 
     </tr> 
 

 
    <!--4--> 
 
     <tr> 
 
      <td> 
 
       <table style="width:100%;"> 
 
        <tr> 
 
         <td width="230px" overflow="hidden"> 
 
          <p style="color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif"> Address1<br /> Address1<br /> Address1<br /> Address1</p> 
 
         </td> 
 

 
         <td width="340"> 
 
         <p style="color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif;"> 
 

 
           <span style="color:#919191;">nr telefonu:</span>number 
 

 
           <br /> 
 

 
           <span style="color:#919191;">nr fax:</span>number 
 

 
           <br /> 
 

 
           <span style="color:#919191;">del:</span>address 
 

 
           <br /> 
 

 
           <span style="color:#919191;">www:</span> <a href="http://www.google.com" target="_blank" style="color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif; text-decoration:none;">www.google.com</a> 
 

 
          </p> 
 
          </td> 
 
        </tr> 
 
       </table> 
 
      </td> 
 
     </tr> 
 

 
    <!--5-->  
 
     <tr> 
 
      <td> 
 
       <table style="width: 100%;"> 
 
       <tr> 
 
       <td height="15"></td> 
 
       </tr> 
 
       <tr> 
 
       <td><img src="https://dummyimage.com/200x200/000/fff" alt="linia" width="200"/></td> 
 
       </tr> 
 
       <tr> 
 
       <td height="8"></td> 
 
       </tr> 
 
       </table> 
 
      </td> 
 
     </tr> 
 

 
    <!--6--> 
 
     <tr> 
 
      <td> 
 
      <p style="padding:0;margin:0; color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif">LEGAL STUFF</p> 
 
      </td> 
 
     </tr> 
 
    </table>

出典

2017-09-29 05:34:43

が私たちのために働いているようですが、コードはよく見えます。会社内で承認している人たちは空白スペースを追加したほうがあまり好きではありませんでした;） – kjubus

はい、しかし、見通しについては、マージンとパディングを受け付けないので、それを管理する必要があります –

HTML電子メール署名の固定サイズを維持するにはどうすればよいですか？

答えて

関連する問題