Why is MJML duplicating this table?

Question

Trying out MJML for a daily email summary for some clients.

I use str_replace to copy in pre-constructed table rows in the email template then compile.

For some reason, as soon as I use my code -- MJML duplicates tables and screws with the layout. Even if I use the code directly from their documentation and input my own words, it distorts it.

Can anyone identify why

Non working code

  <mjml>
    <mj-body>
      <mj-container>
        <mj-section>
          <mj-column>
            <mj-table>
              <tr style="border-bottom:1px solid #ecedee;text-align:left;padding:15px 0;">
                <th style="padding: 0 15px 0 0;">Inventory Type</th>
                <th style="padding: 0 15px;">Subtotal</th>
                <th style="padding: 0 0 0 15px;">Total</th>
              </tr>
              <tr>
                <td style="padding: 0 15px 0 0;">Unknown</td>
                <td style="padding: 0 15px;">$5843.55</td>
                <td style="padding: 0 0 0 15px;">$4047</td>
              </tr>
              <tr>
                <td style="padding: 0 15px 0 0;">Solid Marijuana Infused Edible</td>
                <td style="padding: 0 15px;">$318</td>
                <td style="padding: 0 0 0 15px;">$214</td>
              </tr>  
            </mj-table>
          </mj-column>
        </mj-section>
      </mj-container>
    </mj-body>
  </mjml>

Online Compiler: https://mjml.io/try-it-live/ByJDBobEx

Version: 3.1.1

Answer 1

Sorry for the issue! This is caused by the $ character which is followed by 214 (if you try to add a space between $ and 214 you'll see the second table disappear). It's a known issue of the MJML parser, the implementation of a new parser is on our mid-term roadmap (we'll start working on it early 2017).

I can suggest you a workaround: try replacing the $ signs by the HTML entities $. Working example here: https://mjml.io/try-it-live/rkiWU3b4g.

Hope it helps!