响应式电子邮件 - 莲花桌宽度

Question

我在2个Colonne创建了一个响应式电子邮件模板，

<style type="text/css">@media only screen and (max-device-width: 480px) { table[class=contenttable] {width:320px !important;}}</style>
<table width="640" border="0" cellpadding="0" cellspacing="0" class="contenttable" border="1" style="margin: auto;">
    <tr><td>
        <table width="320" border="0" cellspacing="0" cellpadding="5" align="left">
          <tr><td>
                <a href="">
                    <img src="mini2/p.jpg">
                </a>
            </td></tr>
        </table><table width="320" border="0" cellspacing="0" cellpadding="5" align="right">
            <tr><td>
                <a href=" ">
                    <img src="mini2/pr.jpg"></a>
            </td></tr>
        </table><table width="320" border="0" cellspacing="0" cellpadding="5" align="left">
          <tr><td>
                <a href="">
                    <img src="mini2/p.jpg">
                </a>
            </td></tr>
        </table><table width="320" border="0" cellspacing="0" cellpadding="5" align="right">
            <tr><td>
                <a href=" ">
                    <img src="mini2/pr.jpg"></a>
            </td></tr>
        </table>
    </td></tr>
</table>

我的问题是，莲花并不关心表格宽度=“640” 所以结果是一条长线。 你有什么黑客攻击吗？

Answer 1

有两种表格方式。一种是在HTML中添加另一行的传统方法，在前两个表之间，第二种是添加ghost列。

添加一行：

<table width="640" border="0" cellpadding="0" cellspacing="0" class="contenttable" style="margin: auto;">
    <tr>
		<td>
			<table width="50%" border="0" cellspacing="0" cellpadding="5" align="left">
			  <tr>
				  <td>
					<a href="">
						<img src="http://via.placeholder.com/350x150" width="320" style="width:100%; max-width: 320px; height:auto;">
					</a>
				</td>
				</tr>
			</table>
			<table width="50%" border="0" cellspacing="0" cellpadding="5" align="left">
				<tr><td>
					<a href=" ">
						<img src="http://via.placeholder.com/350x150" width="320" style="width:100%; max-width: 320px; height:auto;">
					</a>
				</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>
			<table width="50%" border="0" align="left" cellpadding="5" cellspacing="0">
			  <tr><td>
					<a href="">
						<img src="http://via.placeholder.com/350x150" width="320" style="width:100%; max-width: 320px; height:auto;">
					</a>
				</td>
				</tr>
			</table>
			<table width="50%" border="0" cellspacing="0" cellpadding="5" align="left">
				<tr><td>
					<a href="">
						<img src="http://via.placeholder.com/350x150" width="320" style="width:100%; max-width: 320px; height:auto;">
					</a>
				</td>
			  </tr>
		  </table>
   	  </td>
	</tr>
</table>

我对上面代码所做的更改是：

• 删除了对齐权限，仅添加左对齐
• 将表格宽度更改为50％
• 在
之间添加了一行

虽然这种方法有效，但我有下面的另一种方法，ghost列允许我们添加列（甚至是行），这些列由使用Outlook和IE来呈现电子邮件的电子邮件客户端读取。

Ghost列：

<table width="640" border="0" cellpadding="0" cellspacing="0" class="contenttable" style="margin: auto;">
    <tr>
		<td>
			<table width="50%" border="0" cellspacing="0" cellpadding="5" align="left">
			  <tr>
				  <td>
					<a href="">
						<img src="http://via.placeholder.com/350x150" width="320" style="width:100%; max-width: 320px; height:auto;">
					</a>
				</td>
				</tr>
			</table>
			<!--[if (gte mso 9)|(IE)]>
			</td><td>
			<![endif]-->
			<table width="50%" border="0" cellspacing="0" cellpadding="5" align="left">
				<tr><td>
					<a href=" ">
						<img src="http://via.placeholder.com/350x150" width="320" style="width:100%; max-width: 320px; height:auto;">
					</a>
				</td>
				</tr>
			</table>
		
			<!--[if (gte mso 9)|(IE)]>
			</td>
			</tr>
				<tr>
					<td>
			<![endif]-->
			<table width="50%" border="0" align="left" cellpadding="5" cellspacing="0">
			  <tr><td>
					<a href="">
						<img src="http://via.placeholder.com/350x150" width="320" style="width:100%; max-width: 320px; height:auto;">
					</a>
				</td>
				</tr>
			</table>
			<!--[if (gte mso 9)|(IE)]>
			</td><td>
			<![endif]-->
			<table width="50%" border="0" cellspacing="0" cellpadding="5" align="left">
				<tr><td>
					<a href="">
						<img src="http://via.placeholder.com/350x150" width="320" style="width:100%; max-width: 320px; height:auto;">
					</a>
				</td>
			  </tr>
		  </table>
   	  </td>
	</tr>
</table>

我做了与上面相同的更改。如果其中任何一项对您有用，请告诉我。您只需将代码复制粘贴到您的电子邮件中并进行测试即可。

请告诉我这是否适合您。