Question

我的电子邮件签名有问题。它基本上是一个表格，其中包含不可见的边界（以便更容易对齐所有元素）。这是6行，其中3行包含图像，最后一行有一些合法的东西（每行单个单元格）。 2行不同：每行有两个单元格（左侧和右侧）。问题是，当我发送电子邮件时，它在Outlook Web App中看起来很好，但是在Outlook桌面应用程序中，两个双单元格行一起被限制在左边。我试图让它固定的位置和宽度，但我似乎无法将其拉下来。任何建议，我做错了什么？

<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>

Answer 1

有一些东西可以帮助您创建完美的电子邮件

避免使用边距，使用td height属性。
避免给出宽度n％，像素是更好的方法。

＆＃13;

<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>

＆＃13;

如何保持HTML电子邮件签名的大小固定？

1 个答案: