如何为响应式电子邮件创建从 3x2 调整到 2x3 的流畅 html table？

Question

我正在制作一个响应式电子邮件模板，我真的很想要特色产品的 table 布局，在桌面上为 3x2，在移动设备上为 2x3。

目前，我正在使用 table 单元格更改为显示为移动客户端的内联块。但是，这在 Outlook 和 Thunderbird 中会中断，因为它们将所有单元格显示在一行中。我试过浮动这些元素，但它们又坏了。

Table Grid 3x2 to 2x3

CSS

     @media screen and (max-width: 600px) {
        .stack2 {
          width: 50% !important;
        }
      }

      .stack2 {
        display: inline-block;
        box-sizing: border-box;
      }

HTML


<table width="100%" cellpadding="0px" cellspacing="0px" border="0px">
  <tr>
    <!-- Product #1 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
    <!-- Product #2 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
    <!-- Product #3 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
    <!-- Product #4 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
    <!-- Product #5 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
    <!-- Product #6 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
  </tr>
</table>

Answer 1

不要为此使用 table 个单元格。细胞将继续并排成排堆叠，这是它们的自然和预期行为。
table 单元格出现在其他单元格下方的唯一方法是在另一行中。
您的实施违反了 HTML 逻辑。

我会选择 tables。这样，它们将根据您给它们的宽度轻松堆叠和重新排列。请记住，您将需要使用 ghost tables 使 tables 在 Outlook 中并排放置。

这里有一个松散的例子（包括 Ghost tables）供你适应为你工作：

<table border="0" cellspacing="0" cellpadding="0" class="FullWidthOnMobile" style="width:600px;">
<tr>
    <td>
        <!--[if (gte mso 9)|(IE)]>
        <table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
        <tr>
        <td style="width:200px;">
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        <td>
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        <td style="width:200px;">
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        <tr>
        <td style="width:200px;">
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        <td>
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        <td style="width:200px;">
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
        <![endif]-->
    </td>
</tr>

我使用的媒体查询。再次按照我的名字修改这些，以便于理解我在做什么：

@media only screen and (max-width:600px){
    .FullWidthOnMobile{width:100%!important;min-width:100%!important;}
    .HalfWidthOnMobile{width:50%!important;min-width:50%!important;}
}

如何为响应式电子邮件创建从 3x2 调整到 2x3 的流畅 html table？

How to create a fluid html table that adjusts from 3x2 to 2x3 for responsive email?

html-table

responsive-design

html-email

tablelayout

responsive-emails