Question

我正在做一个电子邮件模板，并且在移动设备上，我想使td为全角，并且使td都在不同的行上：我可以通过在display: flex; flex-direction: column;上进行tbody来实现，但这更加现代不支持许多电子邮件软件的解决方案。我怎么能用花车或不太现代的东西来做到这一点？尝试过：display:block; float: left; width:100%;上的两个td都放在新行上，但是不会将td的100％放在tr上。也许有人有解决方案？标记和嵌入式样式如下。

<table border="0" cellpadding="0" cellspacing="0"  style=" border-collapse:separate;width: 100%;background:red; padding: 0px 0px;">
    <tbody style="width: 100%; ">

        <tr >

            <td style="padding-left: 35px; position: relative; text-align: center; border-top: 1px solid green;">
                <img width="175px" alt="test" src="img1.png" border="0" style="max-width:100%;vertical-align:top;" />
                <p style="text-transform:uppercase; color: #ffffff; text-align:center; margin:0px; margin-bottom: 50px;    max-width: 180px;margin: auto;">test1</p>

            </td>
            <td style="padding-right: 35px; position: relative; text-align: center; border-top: 1px solid green;">
                <img width="175px" alt="test" src="img2.png" border="0" style="max-width:100%;vertical-align:top;" />
                <p style="text-transform:uppercase; color: #ffffff; text-align:center; margin:0px; margin-bottom: 50px;    max-width: 180px;margin: auto;">test2</p>

            </td>

        </tr>
    </tbody>
</table>

Answer 1

您可以通过以下方式执行此操作：将td设置为阻止，然后在移动时将宽度设置为100％。例如：

<head>
   <style>
      /* When the email goes mobile, set width to 100, height auto and make the element block */
      @media screen and (max-width: 630px;){
         .width{width: 100% !important; height: auto !important; display: block !important}
      }
   </style>
</head>
<body>
<!-- Body content etc -->
<table border="0" cellpadding="0" cellspacing="0"  style=" border-collapse:separate;width: 100%;background:red; padding: 0px 0px;">
<tbody style="width: 100%; ">
    <tr >
        <td style="padding-left: 35px; position: relative; text-align: center; border-top: 1px solid green;" class="width">
        <!-- Added the class "width" to the td -->
            <img width="175px" alt="test" src="img1.png" border="0" style="max-width:100%;vertical-align:top;" />
            <p style="text-transform:uppercase; color: #ffffff; text-align:center; margin:0px; margin-bottom: 50px;    max-width: 180px;margin: auto;">test1</p>

        </td>
        <td style="padding-right: 35px; position: relative; text-align: center; border-top: 1px solid green;" class="width">
        <!-- Added the class "width" to the td -->
            <img width="175px" alt="test" src="img2.png" border="0" style="max-width:100%;vertical-align:top;" />
            <p style="text-transform:uppercase; color: #ffffff; text-align:center; margin:0px; margin-bottom: 50px;    max-width: 180px;margin: auto;">test2</p>

        </td>

    </tr>
</tbody>

或者-您可以在同一个TD中拥有两个表，并执行相同的技巧使它们在移动设备上彼此相邻，唯一的区别是您不必将表设置为显示块。并且使用表方法时要小心，因为Outlook默认情况下不会连续显示两个表，而是将它们堆叠在一起。

在这种情况下，您必须通过在表之间放置以下代码片段来告诉Outlook创建列。

</table>
<!--[if mso]>
</td>
<td valign="top" align="center">
<![endif]-->
<table>

在电子邮件模板的下一行全宽显示表格单元格

1 个答案: