Question

设置：

 <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/以电子邮件形式发送：底部对齐的内容不再是底部对齐。

有关此方法的任何想法和经验吗？

Answer 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来代替。

Answer 2

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

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

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

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

3 个答案: