如何讓HTML電子郵件簽名保持固定大小？

我有一個電子郵件簽名的問題。它基本上是一張寄宿生不可見的表格（爲了更容易對齊所有元素）。這是6行，其中3個包含圖像，最後一個有一些合法的東西（每行單個單元格）。 2行不同：每個都有兩個單元格（左側和右側）。問題是，當我發送電子郵件時，它在Outlook Web App中看起來很好，但在Outlook桌面應用程序中，兩個雙單元格的行在左邊被拉到一起。我試圖讓它成爲一個固定的位置和寬度，但我似乎無法將其拉下。任何建議，我做錯了什麼？如何讓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 我一直在試圖做多種方式（這就是爲什麼我已經嵌套在第一個2個表，對於那些2單元行）。這裏顯示的是額外的邊框。 – kjubus

代碼看起來不錯，可能會出現括號問題，雖然我會更新您的代碼併發布它， –

很少有事情，可以幫助你創造完美的emailer

避免利潤，使用td height屬性。
避免給出寬度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電子郵件簽名保持固定大小？

回答

相關問題