MJML - 有没有办法在不破坏列名的情况下显示 Mobile 的完整表格？答案

【问题标题】：MJML - Is there a way to display the full table for Mobile without breaking the columns names?MJML - 有没有办法在不破坏列名的情况下显示 Mobile 的完整表格？
【发布时间】：2022-01-06 10:44:33
【问题描述】：

我最近发现了 MJML 的强大功能并尝试为我的客户创建电子邮件模板。在这封电子邮件中，我想向他们展示一些表格格式的数据，我目前面临的问题是当我为移动设备显示表格时，这看起来很糟糕（见下面的第二张截图）。此外，我在电子邮件中的内容是德语，在大多数情况下，这会使单词变长。

MJML：

<mjml>
  <mj-head>
    <mj-style>
      .box-shadow, .box-shadow p {
        box-shadow: 0px 3px 12px grey;
        border-radius: 20px 20px;
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-section text-align="center" padding="25px 0">
      <mj-column width="100%" border-radius="20px 20px" background-color="#fff" css-class="box-shadow">
        <mj-text align="center" color="#000" font-weight="bold" padding="15px 0px 5px 0px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed...
        </mj-text>
        <mj-divider border-width="2px"></mj-divider>
        <mj-table table-layout="auto">
          <tr style="border-bottom:1px solid #ecedee;text-align:center;">
            <th>Column A</th>
            <th>Column B</th>
            <th>Column C</th>
            <th>Column D</th>
            <th>Column E</th>
            <th>Column F</th>
            <th>Column G</th>
          </tr>
          <tr style="text-align:center;">
            <td>78876</td>
            <td>C6LE1Q</td>
            <td>customer@gmail.com</td>
            <td>5</td>
            <td>40FT2</td>
            <td>23€</td>
            <td>Yes</td>
          </tr>
        </mj-table>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

桌面的电子邮件模板预览：

移动电子邮件模板预览：

问题： 有没有办法在不破坏列名的情况下显示 Mobile 的完整表格？

提前感谢您的宝贵时间。

【问题讨论】：

标签： html html-table mjml

【解决方案1】：

看起来这不是您正在寻找的 mjml 解决方案，因为您使用的是原始 html 表。

如果您想使用 mjml 响应式功能，您可以使用包装器让多个部分与第二部分中的多个列共享相同的边框。

<mjml>
  <mj-head>
    <mj-style>
      .box-shadow, .box-shadow p {
        box-shadow: 0px 3px 12px grey;
        border-radius: 20px 20px;
      }
    </mj-style>
  </mj-head>
  <mj-body>
     <mj-wrapper  >
    <mj-section text-align="center" padding="25px 0px 0px 0px ">
      <mj-column width="100%" border-radius="20px 20px 0px 0px" background-color="#fff" css-class="box-shadow">
        <mj-text align="center" color="#000" font-weight="bold" padding="15px 5px 5px 5px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed...
        </mj-text>
        <mj-divider padding="0" border-width="2px" ></mj-divider>
      </mj-column>
    </mj-section>
          <mj-section   border-radius="0px 0px 20px 20px" background-color="#fff" css-class="box-shadow" > 
            <mj-column>
              <mj-text padding="20px"> First line of col A</mj-text>
                  <mj-divider border-width="1px" border-style="dashed" border-color="lightgrey" padding="0 20px" />
              <mj-text padding="20px"> Second line of col A</mj-text>
            </mj-column>
            <mj-column>
              <mj-text padding="20px"> First line of col B</mj-text>
                  <mj-divider border-width="1px" border-style="dashed" border-color="lightgrey" padding="0 20px" />
              <mj-text padding="20px"> Second line of col B</mj-text>
            </mj-column>
        </mj-section>
        </mj-wrapper>
  </mj-body>
</mjml>

【讨论】：