电子邮件模板 td 宽度仅根据 outlook 中的内容更改
Email template td widths change based on content in outlook only
我有一个 table 包含两个设置为固定宽度的 但它们似乎仅根据 outlook 上的内容而改变...
如果我在每个 中放置一个测试图像，它们对齐良好并且宽度相等，如果我在每个中放置文本则它们相同但是如果我在一个中放置一个图像而在另一个中放置文本，则图像会增长尽管图像是固定大小以适合其容器，但文本会缩小。
这只发生在 outlook 上，其他一切看起来都很好：
这里是 link 石蕊以查看问题：
https://litmus.com/checklist/emails/public/ef3ee40#ol2007
下面是三个例子的代码，结构相同，只是内容不同：
<文本'> <文本'>。
<!--Section content starts here-->
<table align="left" valign="middle" width="660" border="0" cellspacing="0" cellpadding="0" class="col-12" >
<tr>
<td align="center" valign="middle" width="660" class="col-12">
<table width="660" border="0" cellspacing="0" cellpadding="0" align="center" style="table-layout: fixed;" class="col-12">
<!--Two columns-->
<tr>
<td align="center" valign="middle" style="padding: 20px;border:1px solid black" width="290" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<img class="img-12" width="290" border="0" src="https://via.placeholder.com/290x290" style="display:block;border:none;width:100%;max-width:290px" />
</td>
<td align="center" valign="middle" style="padding: 20px;border:1px solid black" width="290" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<img class="img-12" width="290" border="0" src="https://via.placeholder.com/290x290" style="display:block;border:none;width:100%;max-width:290px" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="middle" width="660" class="col-12">
<table width="660" border="0" cellspacing="0" cellpadding="0" align="center" style="table-layout: fixed;" class="col-12">
<!--Two columns-->
<tr>
<!--Left image section-->
<td align="center" valign="middle" style="padding: 20px;border:1px solid black" width="290" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<img class="img-12" width="290" height="290" border="0" src="https://via.placeholder.com/290x290" style="display:block;border:none;width:100%;max-width:290px" />
</td>
<td align="left" valign="middle" style="padding: 20px;border:1px solid black" width="290" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;display:block;width:290px">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;">Take a look <a href="https://skyacomms.grouptreehosting.net/tracker.axd?t=620cced4b420f1b17e8f2d3e&u=https%3a%2f%2fwww.skyacademystudios.com%2f" style="color:#eeabff;text-decoration: underline;font-weight:600;">here</a></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="middle" width="660" class="col-12">
<table width="660" border="0" cellspacing="0" cellpadding="0" align="center" style="table-layout: fixed;" class="col-12">
<!--Two columns-->
<tr>
<td align="left" valign="middle" style="padding: 20px;border:1px solid black" width="290" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;display:block;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;">Take a look <a href="https://skyacomms.grouptreehosting.net/tracker.axd?t=620cced4b420f1b17e8f2d3e&u=https%3a%2f%2fwww.skyacademystudios.com%2f" style="color:#eeabff;text-decoration: underline;font-weight:600;">here</a></p>
</td>
<td align="left" valign="middle" style="padding: 20px;border:1px solid black" width="290" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;display:block;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;">Take a look <a href="https://skyacomms.grouptreehosting.net/tracker.axd?t=620cced4b420f1b17e8f2d3e&u=https%3a%2f%2fwww.skyacademystudios.com%2f" style="color:#eeabff;text-decoration: underline;font-weight:600;">here</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
感谢您提供任何帮助。
如果您使用百分比，那将适用于 Outlook（以及其他所有内容）。我还去掉了 <p> 的宽度（290 像素），因为宽度已经在 <td> 中设置，这可能会混淆没有那么多 space 的手机上的某些东西]可用。
<tr>
<td align="center" valign="middle" width="660" class="col-12">
<table width="660" border="0" cellspacing="0" cellpadding="0" align="center" style="table-layout: fixed;" class="col-12">
<!--Two columns-->
<tr>
<!--Left image section-->
<td align="center" valign="middle" style="padding: 20px;border:1px solid black" width="50%" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<img class="img-12" width="290" border="0" src="https://via.placeholder.com/290x290" style="display:block;border:none;width:100%;max-width:290px" />
</td>
<td align="left" valign="middle" style="padding: 20px;border:1px solid black" width="50%" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;display:block;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;">Take a look <a href="https://skyacomms.grouptreehosting.net/tracker.axd?t=620cced4b420f1b17e8f2d3e&u=https%3a%2f%2fwww.skyacademystudios.com%2f" style="color:#eeabff;text-decoration: underline;font-weight:600;">here</a></p>
</td>
</tr>
</table>
</td>
</tr>
另外，对于移动设备中的响应式图像，您需要删除高度属性 (height="290") 或添加 style="...height:auto;"。否则即使在手机上高度也会保持不变，并且会变形。
我确实让它在 width="290" 下工作，但这不适用于手机。 50% 意味着移动设备是响应式的，因为它们的列只有大约 150 像素（根据经验，移动设备的宽度约为 300 像素）。
我有一个 table 包含两个设置为固定宽度的
如果我在每个
这只发生在 outlook 上，其他一切看起来都很好：
这里是 link 石蕊以查看问题：
https://litmus.com/checklist/emails/public/ef3ee40#ol2007
下面是三个例子的代码，结构相同，只是内容不同：
<文本'> <文本'>。
<!--Section content starts here-->
<table align="left" valign="middle" width="660" border="0" cellspacing="0" cellpadding="0" class="col-12" >
<tr>
<td align="center" valign="middle" width="660" class="col-12">
<table width="660" border="0" cellspacing="0" cellpadding="0" align="center" style="table-layout: fixed;" class="col-12">
<!--Two columns-->
<tr>
<td align="center" valign="middle" style="padding: 20px;border:1px solid black" width="290" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<img class="img-12" width="290" border="0" src="https://via.placeholder.com/290x290" style="display:block;border:none;width:100%;max-width:290px" />
</td>
<td align="center" valign="middle" style="padding: 20px;border:1px solid black" width="290" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<img class="img-12" width="290" border="0" src="https://via.placeholder.com/290x290" style="display:block;border:none;width:100%;max-width:290px" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="middle" width="660" class="col-12">
<table width="660" border="0" cellspacing="0" cellpadding="0" align="center" style="table-layout: fixed;" class="col-12">
<!--Two columns-->
<tr>
<!--Left image section-->
<td align="center" valign="middle" style="padding: 20px;border:1px solid black" width="290" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<img class="img-12" width="290" height="290" border="0" src="https://via.placeholder.com/290x290" style="display:block;border:none;width:100%;max-width:290px" />
</td>
<td align="left" valign="middle" style="padding: 20px;border:1px solid black" width="290" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;display:block;width:290px">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;">Take a look <a href="https://skyacomms.grouptreehosting.net/tracker.axd?t=620cced4b420f1b17e8f2d3e&u=https%3a%2f%2fwww.skyacademystudios.com%2f" style="color:#eeabff;text-decoration: underline;font-weight:600;">here</a></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="middle" width="660" class="col-12">
<table width="660" border="0" cellspacing="0" cellpadding="0" align="center" style="table-layout: fixed;" class="col-12">
<!--Two columns-->
<tr>
<td align="left" valign="middle" style="padding: 20px;border:1px solid black" width="290" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;display:block;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;">Take a look <a href="https://skyacomms.grouptreehosting.net/tracker.axd?t=620cced4b420f1b17e8f2d3e&u=https%3a%2f%2fwww.skyacademystudios.com%2f" style="color:#eeabff;text-decoration: underline;font-weight:600;">here</a></p>
</td>
<td align="left" valign="middle" style="padding: 20px;border:1px solid black" width="290" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;display:block;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;">Take a look <a href="https://skyacomms.grouptreehosting.net/tracker.axd?t=620cced4b420f1b17e8f2d3e&u=https%3a%2f%2fwww.skyacademystudios.com%2f" style="color:#eeabff;text-decoration: underline;font-weight:600;">here</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
感谢您提供任何帮助。
如果您使用百分比，那将适用于 Outlook（以及其他所有内容）。我还去掉了 <p> 的宽度（290 像素），因为宽度已经在 <td> 中设置，这可能会混淆没有那么多 space 的手机上的某些东西]可用。
<tr>
<td align="center" valign="middle" width="660" class="col-12">
<table width="660" border="0" cellspacing="0" cellpadding="0" align="center" style="table-layout: fixed;" class="col-12">
<!--Two columns-->
<tr>
<!--Left image section-->
<td align="center" valign="middle" style="padding: 20px;border:1px solid black" width="50%" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<img class="img-12" width="290" border="0" src="https://via.placeholder.com/290x290" style="display:block;border:none;width:100%;max-width:290px" />
</td>
<td align="left" valign="middle" style="padding: 20px;border:1px solid black" width="50%" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;display:block;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;">Take a look <a href="https://skyacomms.grouptreehosting.net/tracker.axd?t=620cced4b420f1b17e8f2d3e&u=https%3a%2f%2fwww.skyacademystudios.com%2f" style="color:#eeabff;text-decoration: underline;font-weight:600;">here</a></p>
</td>
</tr>
</table>
</td>
</tr>
另外，对于移动设备中的响应式图像，您需要删除高度属性 (height="290") 或添加 style="...height:auto;"。否则即使在手机上高度也会保持不变，并且会变形。
我确实让它在 width="290" 下工作，但这不适用于手机。 50% 意味着移动设备是响应式的，因为它们的列只有大约 150 像素（根据经验，移动设备的宽度约为 300 像素）。