我正在为事件监控器制作响应式 eDM，使用 Litmus 作为测试工具。
我在获得如下图所示的表格时遇到了一些麻烦。
我当前的代码如下所示。整个文档大小为 600px，此表格需要以 540px 为中心。
<table border="0" cellspacing="0" cellpadding="0" class="content" align="center">
<tr>
<td colspan="3">
<table width="100%" bgcolor="#ffffff">
<tr>
<td class="gutter"> </td>
<td class="spacer-medium"> </td>
<td class="gutter"> </td>
</tr>
<tr>
<td class="gutter"> </td>
<tr width="540" height="148" style="background-image: url('rectangle.png'); background-size:100% 100%; background-repeat: no-repeat; width: 540px; padding-top:20px; padding-left:20px; padding-right:10px;color: #ffffff; font-family: Arial, Helvetica; font-size: 14px; line-height: 20px;" class="__not-plain-text gradient__image centre" background="rectangle.png" bgcolor="#f36d00">
<td width="400" align="left" style="float:left; width:400px; font-weight:bold;">TEXT GOES HERE AS BOLD</td>
<td width="400" align="left" style="float:left; width:400px;">LONGER PARAGRAPH TO GO HERE AS NORMAL</td>
<td><img src="images/man2.png" align="right" alt="offer" width="109" style="width: 109px; float:right padding-right:10px" class="__not-plain-text"></td>
</tr>
</tr>
</table>
</td>
</tr>
任何帮助将不胜感激!谢谢。
最佳答案
为了以 Niklas Fett 的回答为基础，我采用了他的代码并更新了您的电子邮件宽度。这是响应式电子邮件设计(针对支持@media 查询的电子邮件客户端)和混合电子邮件设计(针对不支持媒体查询的电子邮件客户端)的组合。这有点复杂，但您可以使用下面的代码片段构建您的电子邮件。
还要注意正确嵌套 <table>标签: 你不能嵌套 <tr>直接在<td>里面.
@media screen and (max-width: 600px) {
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid,
.fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* And center justify these ones. */
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;" background="rectangle.png">
<tr>
<!-- dir=rtl : This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. -->
<td dir="rtl" align="center" height="100%" valign="top" width="100%" style="padding: 10px 0;">
<!--[if mso]>
<table border="0" cellspacing="0" cellpadding="0" align="center" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top" style="font-size:0; padding: 10px 0;">
<!--[if mso]>
<table border="0" cellspacing="0" cellpadding="0" align="center" width="600">
<tr>
<td align="left" valign="top" width="220">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; max-width: 200px; min-width:160px; vertical-align:top; width:100%;" class="stack-column">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="padding: 0 10px 10px 10px;">
<img src="http://placehold.it/200" width="200" alt="" style="border: 0;width: 100%;max-width: 200px;" class="center-on-narrow">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="440">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; max-width:66.66%; min-width:320px; vertical-align:top;" class="stack-column">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px 10px 0; text-align: left;" class="center-on-narrow">
<strong style="color:#111111;">Class aptent taciti sociosqu</strong>
<br><br>
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>关于html - 响应式电子邮件，创建 HTML 表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38419206/