为什么在 <td> Outlook 中被推到右侧

Question

我试图在HTML电子邮件中编码一个横幅，左边有一个小图像，右边有文本。我现在的代码是这样的:

<table border="0" width="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td style="background-color:#fcc80d;padding-top:30px;padding-bottom:30px;padding-right:30px;padding-left:30px;">
<table border="0" width="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word;">
<tr>
<td align="right" style="width:100%;max-width:10%;display:inline-block;">
<div style="text-align:left;font-size:18px;width:100%;">
<img src="image.jpg" width="55" height="39" style="height:100%;width:100%;max-width:55px;" />
</div>
</td>
<td align="left" style="width:100%;max-width:90%;display:inline-block;text-align:left;">
<div style="text-align:left;font-size:18px;width:100%;">
LOREM IPSUM DOLOR SET AMET
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>

当我发送一封测试邮件时，Outlook中的渲染看起来很差——文本被推到右边很远的地方。我尝试在浏览器中检查代码，但没有发现代码可能会这样做的任何原因。任何见解都会很棒。谢谢!

Answer 1

试试吧。我已经从两个td中删除了样式，并给了左边一个宽度。20px的额外宽度是为了让列在文本之前有一个呼吸空间。

<table border="0" width="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td style="background-color:#fcc80d;padding-top:30px;padding-bottom:30px;padding-right:30px;padding-left:30px;">
<table border="0" width="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word;">
<tr>
<td align="left" width="75">
<div style="text-align:left;font-size:18px;width:100%;">
<img src="image.jpg" width="55" height="39" style="height:100%;width:100%;max-width:55px;" />
</div>
</td>
<td align="left">
<div style="text-align:left;font-size:18px;width:100%;">
LOREM IPSUM DOLOR SET AMET
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>