html-email - Outlook 表格过度扩展导致相邻内容换行
问题描述
我有一个带有文本和相邻图像的表格，由于某种原因，包含文本的表格的宽度会扩展，将图像推到换行符。有人可以帮我确定导致此扩展的原因以及如何删除它吗？
]
<table id="photo-l4" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;height:0" align="center" border="0" cellpadding="0" cellspacing="0" width="600" class="mktoModule m_photo-l" mktoname="Photo-l4" height="0">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${heroBackgroundColor};" bgcolor="${heroBackgroundColor}" valign="top">
<table class="spacer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;border-top: 1px solid #000;border-bottom: 1px solid #000;border-left: 1px solid #000;height:100%;" align="left" border="0" cellpadding="0" cellspacing="0" width="45" height="100%">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;" height="100%" width="100%"></td>
</tr>
</tbody>
</table> </td>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${heroBackgroundColor};height:0;" bgcolor="${heroBackgroundColor}" valign="top" height="0">
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;" align="center" border="0" cellpadding="0" cellspacing="0" width="555">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<center>
<table class="table1-3" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="right" border="0" cellpadding="0" cellspacing="0" width="246">
<tbody>
<tr>
<td class="photo" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<div style="display:inline-block" id="photo3" mktolockimgstyle="false">
<a><img alt="Photo" src="http://templates.marketo.net/newsletter3/post1.jpg" class="mobile-img" style="-ms-interpolation-mode: bicubic; outline: none; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; text-decoration: none; border-top-width: 0; display: block; max-width: 100%; line-height: 100%; height: 0; width: 246px;" height="0" width="246" /></a>
</div> </td>
</tr>
<tr class="stack-tablet" style="max-height:0px;overflow:hidden;padding-left: 0; overflow: hidden; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; float: left; margin-top: 0; margin-right: 0; margin-bottom: 0; mso-hide: all; display: none;">
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;"> </td>
</tr>
</tbody>
</table>
<table class="table2-3" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;border-top: 1px solid #000;border-bottom: 1px solid #000;height:0;width:309px;" align="left" border="0" cellpadding="0" cellspacing="0" width="309"height="0">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<table class="contents" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${cardSpacer};font-size:${cardSpacer};background-color:${heroBackgroundColor};" bgcolor="${heroBackgroundColor}" height="${cardSpacer}"> </td>
</tr>
<tr>
<td class="article" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<table style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="primary-font title" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;padding-left: 0;font-family: 'Roboto', 'Merriweather', 'Arial Narrow', Arial, sans-serif;color: #202124;color: #FFF;font-size: 27px;line-height: 29px;text-align: left;padding-top: 0;padding-right: 0;padding-bottom: 0px;border-collapse: collapse;">
<div class="mktoText" mktoname="Right Article title" id="articleTitle3">
Intro title
</div></td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${cardSpacer2};font-size:${cardSpacer2};background-color:${heroBackgroundColor};" bgcolor="${heroBackgroundColor}" height="${cardSpacer2}"> </td>
</tr>
<tr>
<td class="primary-font text" style="hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;-ms-text-size-adjust: 100%;font-family:'Roboto', 'Merriweather', 'Arial Narrow', Arial,sans-serif; color: #FFF;font-size: 17px;line-height: 21px;padding-bottom: 0px;text-align: left;border-collapse: collapse;">
<div class="mktoText" mktoname="Right Text" id="text5">
Gumbo beet greens corn soko endive gumbo gourd. shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber.
</div></td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${cardSpacer2};font-size:${cardSpacer3};background-color:${heroBackgroundColor};" bgcolor="${heroBackgroundColor}" height="${cardSpacer3}"> </td>
</tr>
<tr>
<td class="cta" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<!--table class="spacer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="left" border="0" cellpadding="0" cellspacing="0" width="18" height="40">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;background-color:${heroButtonBackgroundColor};" height="100%" width="100%" bgcolor="${heroButtonBackgroundColor}"></td>
</tr>
</tbody>
</table-->
<table style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;background-color:${heroButtonBackgroundColor}" align="left" border="0" cellpadding="0" cellspacing="0" bgcolor="${heroButtonBackgroundColor}">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; line-height:${heroButtonSpacerTop}" line-height="${heroButtonSpacerTop}"> </td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;" align="center"> <a href="${heroLink}" target="_blank" class="button" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust:
100%;font-size: 14px;font-family: 'Roboto', 'Merriweather', Arial, sans-serif;color: ${heroButtonTextColor};display: inline-block;text-decoration: none;"> ${heroLinkText} </a> </td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; line-height:${heroButtonSpacerBottom}" line-height="${heroButtonSpacerBottom}"> </td>
</tr>
</tbody>
</table>
<!--table class="spacer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="left" border="0" cellpadding="0" cellspacing="0" width="18" height="40">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;background-color:${heroButtonBackgroundColor};" height="100%" width="100%" bgcolor="${heroButtonBackgroundColor}"></td>
</tr>
</tbody>
</table--> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
</center> </td>
</tr>
<!-- <tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${cardSpacer3};font-size:${cardSpacer3};" height="${cardSpacer3}"> </td>
</tr> -->
</tbody>
</table> </td>
</tr>
</tbody>
</table>解决方案
你的代码很安静，所以我使用了一个示例代码来向你展示如何做到这一点。
选项1：
这是最容易做到的。
- 在两个列表周围添加一个表
- 使两个内表的宽度为外表大小的一半。下面的示例外部表为 500px，内部表设置为 250px 和 250px
- 在表之间添加一个 Ghost 列
<!--[if (gte mso 9)|(IE)]></td><td align="left" valign="top"><![endif]-->。注意：此幽灵列适用于您创建的新表。Outlook 将读取此代码并添加一个额外的列。
.wrapper{outline:1px solid #000;}<table width="500" border="0" cellspacing="0" cellpadding="0" class="wrapper">
<tbody>
<tr>
<td>
<table width="250" border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center">column 1</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]></td><td align="left" valign="top"><![endif]-->
<table width="250" border="0" align="right" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center">column 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>选项 2：
- 将内部表格的宽度更改为小于外部表格一半的几个像素。下面的示例外部表为 500px，内部表设置为 248px 和 249px
- 添加 CSS (
border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;) 以在表格放在一起时删除多余的空间。默认情况下，当呈现表格时，Outlook 会在表格周围添加空间。
.wrapper{outline:1px solid #000;}<table width="500" border="0" cellspacing="0" cellpadding="0" class="wrapper">
<tbody>
<tr>
<td>
<table width="248" border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center">column 1</td>
</tr>
</tbody>
</table>
<table width="249" border="0" align="right" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center">column 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>以上示例使用 CSS ( .wrapper) 仅用于显示目的。
推荐阅读
- firebase - 如何根据开始和结束日期时间过滤包含时间戳的 Firebase 对象列表？
- azure-web-app-service - 我的 Spring Boots 应用程序最终仅使用 github 操作和 azure 加载
- spring-boot - Spring Boot Connection JPA 创建数据库
- python - 尝试使用 python、flask 和 mongodb 预填充下拉菜单
- git - 撤消对远程存储库的更改
- reactjs - react 有标记绑定语法吗？
- django - 无效的 HTTP_HOST 标头：“127.0.0.1:8000”。您可能需要将“127.0.0.1”添加到 ALLOWED_HOSTS
- python - 具有嵌入式和浮点输入的 Keras GRU
- notepad++ - 在记事本++中的不同行中添加或减去值
- javascript - 如何在 laravel livewire 中应用谷歌地图 api