Outlook 2007 和 2010 表格单元格格式因内容过长而丢失答案

【问题标题】：Outlook 2007 and 2010 table cell formatting lost with long contentOutlook 2007 和 2010 表格单元格格式因内容过长而丢失
【发布时间】：2017-06-27 02:22:17
【问题描述】：

设置：

 <table width="600" >
    <tr>
        <td width="400" rowspan="2" valign="top">
            With very long content here*
        </td>
        <td width="200" valign="top">
            Top-aligned content
        </td>
    </tr>
    <tr>
      <td valign="bottom">
          *Bottom-aligned content loses vertical alignment
             and appears as if valign="middle"              
       </td>
    </tr>
 </table>

示例代码在 jsfiddle 中，因为它太长（触发错误需要大量内容）。

请看这些：

http://jsfiddle.net/webhelpla/XZyg2/ 作为电子邮件发送看起来不错

http://jsfiddle.net/webhelpla/XZyg2/1/ 作为电子邮件发送：底部对齐的内容不再底部对齐。

对此有什么想法和经验吗？

【问题讨论】：

标签： outlook html-table html-email

【解决方案1】：

也尝试添加vertical-align:bottom;，

  <td valign="bottom" style='vertical-align:bottom;' >
      *Bottom-aligned content loses vertical alignment
         and appears as if valign="middle"              
   </td>

试试this 小提琴。我从 td 中删除了 rowspan=2，始终使用 cellpadding 代替它。

【讨论】：

【解决方案2】：

将 table-layout:fixed 添加到表格的 css 中，看看是否有帮助。 Coder1984 在 td 中添加“style=”标签是正确的，因为一些电子邮件客户端在这方面做得更好......

无论如何，很难预测 html 电子邮件将如何在各种客户端中呈现。我使用email on acid 来检查各种客户端的渲染情况，从网络邮件到电子邮件客户端再到移动设备......

【讨论】：

【解决方案3】：

Outlook 的块内容超过一定大小（如果我没记错的话是 2300 像素）存在问题。您也许可以避免右侧行中第三个单元格的问题：

 <table width="600" >
    <tr>
        <td width="400" rowspan="3" valign="top">
            With very long content here*
        </td>
        <!-- Add minimal heights to force the middle row to take the space -->
        <td width="200" valign="top" height="1">
            Top-aligned content
        </td>
    </tr>
    <tr><td style="page-break:always"><!-- Let's make a page break *here* --></td></tr>
    <tr>
      <td valign="bottom" height="1">
          *Bottom-aligned content loses vertical alignment
             and appears as if valign="middle"              
       </td>
    </tr>
 </table>

【讨论】：