如何实现<tr>标签的垂直有序排列？Outlook邮件模板布局问题求助

嘿，我太懂你这种感受了——Outlook对CSS的支持简直是史前级别的，不能碰display属性的限制确实让人束手束脚。咱们来拆解你的问题，然后用Outlook友好的方式解决它！

问题根源 #

你想移动的那个<tr>，现在的padding-top:10px在Outlook里根本不生效——因为Outlook几乎忽略<tr>的padding样式，所有内边距都得放到<td>里才管用。另外，上方的<tr>里的<td>设置了padding:20px 0，底部的20px内边距会让两个<tr>之间产生多余的间距，这可能也是你觉得位置不对的原因之一。

解决方案 #

咱们调整两个关键地方，完全用Outlook支持的表格属性来实现布局：

• 把上方<tr>的<td>的padding改成padding:20px 0 0 0，去掉底部的多余间距；
• 把目标<tr>的padding-top样式删掉，把顶部内边距移到它里面的<td>上，同时确保border-top和上方内容对齐。

修改后的完整代码如下：

<table border="0" cellpadding="0" cellspacing="0" border-collapse="collapse" width="768" style=" font-family: 'Roboto', 'Montserrat', sans-serif; background-color: #fff; " > 
<tbody> 
<tr> 
<td style="padding: 20px 0 0 0"> <!-- 去掉底部的20px padding，消除多余间距 -->
<table border="0" cellpadding="0" cellspacing="0" width="768" style="font-size: 20px" > 
<tbody> 
<tr> 
<td width="25"></td> 
<td style="padding: 10px 0; color: #b1b1b1">lorem ipsum:</td> 
<td align="right" style="padding: 10px 0; color: #31424a"> lorem ipsum </td> 
<td width="25"></td> 
</tr> 
</tbody> 
</table> 
</td> 
</tr> 
<tr> <!-- 删除无效的padding-top样式 -->
<td width="25px;"></td> 
<td width="100px;" style=" padding-top: 10px; vertical-align: top; border-top: 1px solid #e3e3e3; " > 
<img src="https://www.bgastore.ie/cache/48/215x300-Ramar_Galleri1_Blocky_White_100x100_cm.jpg" alt="photo" width="100" height="100" style="padding-right: 3px" /> 
</td> 
<td style="padding: 10px 0 20px 0; border-top: 1px solid #e3e3e3"> 
<table border="0" cellpadding="0" cellspacing="0" width="618" style="font-size: 15px; color: #595b5d" > 
<thead> 
<tr style="color: #909090"> 
<th align="left">test</th> 
<th align="left">test</th> 
<th align="left">test</th> 
<th align="left">test</th> 
<th align="left">test</th> 
<th align="left">test</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td style="vertical-align: top; padding: 10px 0 0 0">test</td> 
<td style="vertical-align: top; padding: 10px 0 0 0">test</td> 
<td style="vertical-align: top; padding: 10px 0 0 0">test</td> 
<td style="vertical-align: top; padding: 10px 0 0 0">test</td> 
<td style="vertical-align: top; padding: 10px 0 0 0">test</td> 
<td style="vertical-align: top; padding: 10px 0 0 0"> 
<span style="color: #d2222d; border-bottom: 1px solid#d2222d" >test</span > 
</td> 
</tr> 
<tr> 
<td colspan="6" style="vertical-align: top; padding-top: 10px"> 
<span style="color: #909090; font-weight: 700; display: block" >test</span > 
<span style="color: #d2222d; padding-top: 5px; display: block" >test</span > 
</td> 
</tr> 
</tbody> 
</table> 
</td> 
</tr> 
</tbody> 
</table>

额外提示 #

• 永远记住：在Outlook邮件模板里，所有的间距、对齐都要靠<td>的padding、cellpadding/cellspacing来实现，<tr>的样式大多被忽略；
• 边框样式也要加到<td>上，<tr>的border在Outlook里支持也很差；
• 如果需要更精细的间距，还可以在两个<tr>之间加一个空的<tr>，里面放一个高度为目标值的<td>（设置height:10px; line-height:0; font-size:0;来确保Outlook正确识别）。

内容的提问来源于stack exchange，提问作者sosick