2

I recently discover the power of MJML and trying to create a email template for my clients. In this email I want to show them some data on a table format, the problem Im currently facing is when I display the table for mobile, which looks horrible (see 2nd screenshot below). Also my the content in the email is in german, which in most of the cases makes the words longer.

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>

Email template preview for Desktop: enter image description here

Email template preview for Mobile: enter image description here

Question: Is there a way to display the full table for Mobile without breaking the columns names?

Thank you in advance for your time.

Lluís Mañas
  • 43
  • 1
  • 6

1 Answers1

0

It looks like it's not a mjml solution you are looking for since you are using raw html table.

If you want to use the mjml responsive feature, you could use a wrapper to have several sections that share the same border with multiple columns in the second sections.

<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>
Robert Berte
  • 13
  • 5