在电子邮件模板的下一行全角显示 table 个单元格

Question

我正在做一个电子邮件模板，在移动设备上我想让 td 为全角，并且两个 td 都在不同的行上：我可以通过在 tbody 上执行 display: flex; flex-direction: column; 来实现，但仅此而已更现代的解决方案，不支持许多电子邮件软件。我怎么能用花车或不太现代的东西来实现这一点？尝试过： 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 中有两个 tables 并使用相同的技巧让它们在移动设备上位于彼此之下，唯一的区别是你不必设置 tables 显示块。使用 table 方法时要小心，因为默认情况下 outlook 不会连续显示两个 table，它会尝试将它们堆叠起来。

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

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

在电子邮件模板的下一行全角显示 table 个单元格

Display table cell on the next line full width on email template

html

css

html-email