css - 响应式电子邮件 - 莲花 table 宽

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>

我的问题是 Lotus 不关心表格宽度 =“640”所以结果是一长串。你有什么技巧吗？

Answer 1

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

添加一行:

<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 columns 允许我们添加列(甚至行)，这些列由使用 Outlook 和 IE 呈现电子邮件的电子邮件客户端读取。

幽灵专栏:

<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>

我做了和上面一样的修改。让我知道这些是否对您有用。您只需将代码复制粘贴到您的电子邮件中并进行测试即可。

让我知道这是否适合您。