Outlook 2013呈现问题：嵌套表格截断相邻文本 [英] Outlook 2013 rendering issue: nested table truncating adjacent text

问题描述

在开发html电子邮件新闻稿时，我经常使用类似于以下的结构：

 < table width =244 border =0cellpadding =0cellspacing =0bgcolor =＃ffffcc> 
< tr> 
< td> 
< table border =0align =left> 
< tbody> 
< tr> 
< td bgcolor =＃FFCCCC>>文字放在表格单元格中。< br>和另一行文字。< br>和第三行。< / td> 
< / tr> 
< / tbody> 
< / table> 
你好。这是示例文本。这是另一句话。你好。这是示例文本。这是另一句话。你好。这是示例文本。这是另一个句子。< / td> 
< / tr> 
  

在浏览器中查看时，结果如下所示：

但在Outlook 2013呈现时，主（黄色）表格中最左边的文字会被截断：

有没有解释或解决这个问题？

（我通常会在内部（粉红色）表格中放置一个图像，而不是文本。设计主要（黄色）文本似乎在图像周围流动，无论是图像还是文本，结果都是一样的。主（黄色）表格中的文本被截断，如此处所示。）

尝试在标题表上设置左对齐，在我的代码中，这将适用于所有客户端。
为所有客户进行测试：

 < table cellspacing =0cellpadding =0width = 560align =leftborder =0> 
< tbody> 
< tr> 
< td align =left> 
< table cellspacing =0cellpadding =0align =left> 
< tbody> 
< tr> 
<！ - 图片顶部的spacer  - > 
< td align =leftcolspan =2> 
< img src =spacer.gifheight =5alt =spacerstyle =display：block; margin：0px; border：0px; align =left/> 
< / td> 
< / tr> 
< tr> 
 <！ - 图片或文字 - > 
< td align =left> 
< img src =imagesrcalt =imagealtstyle =display：block; margin：0px; border：0px; /> 
< / td> 
 
<！ - 图片右侧的spacer  - > 
< td align =left> 
< img src =spacer.gifwidth =11alt =spacerstyle =display：block; margin：0px; border：0px; /> 
< / td> 
< / tr> 
< tr> 
 
 <！ -  spacer为图片底部 - > 
< td colspan =2align =left> 
< img src =spacer.gifheight =11alt =spacerstyle =display：block; margin：0px; border：0px; /> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
 
 <！ - 这里是您的tekst  - > 
< div style =margin：0px; padding：0px; mso-line-height-rule：exactly; color：＃000000; font-family：Verdana，Arial; font-size：12px; line-height ：20px; display：block;> Hello。这是示例文本。这是另一句话。你好。这是示例文本。< / div> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
  

In developing html email newsletters, I often use a structure similar to the following:

<table width="244" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffcc">
<tr>
  <td>
        <table border="0" align="left">
        <tbody>
        <tr>
              <td bgcolor="#FFCCCC">text in the table cell.<br>and another line of text.<br>and a third line.</td>
        </tr>
        </tbody>
        </table>
Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence.</td>
</tr>

When viewed in a browser, the result looks like this:

but when rendered by Outlook 2013, the left-most text in the main (yellow) table is cut-off:

Is there an explanation or a work-around for this?

(I would typically put an image, instead of text, in the inner (pink) table. This allows a design where the main (yellow) text seems to flow around the image. Whether image or text, the result is the same. The text in the main (yellow) table is truncated as seen here.)

解决方案

Try to set a align left on the heading table, in my code this will work in all clients. Tested in litmus for all clients:

<table cellspacing="0" cellpadding="0" width="560" align="left" border="0">
<tbody>
    <tr>
        <td align="left">   
            <table cellspacing="0" cellpadding="0" align="left">
                <tbody>
                    <tr>
                        <!-- spacer for the top of the image -->
                        <td align="left" colspan="2">
                            <img src="spacer.gif" height="5" alt="spacer" style="display:block; margin:0px; border:0px;" align="left" />
                        </td>
                    </tr>
                    <tr>
                        <!-- the image or text -->
                        <td align="left">
                            <img src="imagesrc" alt="imagealt" style="display:block; margin:0px; border:0px;" />
                        </td>

                        <!-- spacer for the right of the image -->
                        <td align="left">
                            <img src="spacer.gif" width="11" alt="spacer" style="display:block; margin:0px; border:0px;" />
                        </td>
                    </tr>
                    <tr>

                        <!-- spacer for the bottom of the image -->
                        <td colspan="2" align="left">
                            <img src="spacer.gif" height="11" alt="spacer" style="display:block; margin:0px; border:0px;" />
                        </td>
                    </tr>
                </tbody>
            </table>

            <!-- here your tekst -->
            <div style="margin:0px; padding:0px; mso-line-height-rule: exactly; color:#000000; font-family:Verdana, Arial; font-size:12px; line-height:20px; display:block;">Hello. This is sample text. This is another sentence. Hello. This is sample text.</div>
        </td>
    </tr>
</tbody>
</table>

这篇关于Outlook 2013呈现问题：嵌套表格截断相邻文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！