Padding between Sections and Word Breaks

Hey there,

So I’m working on creating some transaction emails and I’m new to mjml and struggling with some basics. I can’t seem to figure out how to get rid of all of the extra space in between my sections.

Example:

I also need help figuring out how to remove the word break or at least get it so the abbreviation on the text ‘QTY’ isn’t breaking. I’ve put larger words in that same spot and it breaks way later in the text.

Here’s my code:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>
          <mj-style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    html,
    body,
    table,
    tbody,
    tr,
    td,
    div,
    p,
    ul,
    ol,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 0;
      padding: 0;
    }
    body {
      margin: 0;
      padding: 0;
      font-size: 0;
      line-height: 0;
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
    }
    table {
      border-spacing: 0;
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }
    table td {
      border-collapse: collapse;
    }
    .ExternalClass {
      width: 100%;
    }
    .ExternalClass,
    .ExternalClass p,
    .ExternalClass span,
    .ExternalClass font,
    .ExternalClass td,
    .ExternalClass div {
      line-height: 100%;
    }
    /* Outermost container in Outlook.com */
    .ReadMsgBody {
      width: 100%;
    }
    img {
      -ms-interpolation-mode: bicubic;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: Arial;
    }
    h1 {
      font-size: 28px;
      line-height: 32px;
      padding-top: 10px;
      padding-bottom: 24px;
    }
    h2 {
      font-size: 24px;
      line-height: 28px;
      padding-top: 10px;
      padding-bottom: 20px;
    }
    h3 {
      font-size: 20px;
      line-height: 24px;
      padding-top: 10px;
      padding-bottom: 16px;
    }
    p {
      font-size: 16px;
      line-height: 20px;
      font-family: Georgia, Arial, sans-serif;
    }
    </style>

    <style>
      .container600 {
        width: 600px;
        max-width: 100%;
      }
    @media all and (max-width: 599px) {
      .container600 {
        width: 100% !important;
      }
      
    
      .smarttable {
        border: 0;
      }
      .smarttable thead {
        display:none;
        border: none;
        clip: rect(0 0 0 0);
        height: 0px;
        margin: 0px;
        overflow: hidden;
        padding: 0;
        max-width:0px;
        max-height:0px;
      }
      .smarttable tr {
        display: block;
        width:90%;
        margin:20px auto;
      }
      .smarttable td {
        border-bottom: 1px solid #000;
        display: block;
        font-size: 14px;
        text-align: right;
      }
      .smarttable td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
      }
    }
  </style>
</mj-style>
   <!--[if gte mso 9]>
        <style>
            .ol {
              width: 100%;
            }
        </style>
    <![endif]-->

</head>
    <center>

        <!--[if gte mso 9]><table width="600" cellpadding="0" cellspacing="0"><tr><td>
                    <![endif]-->

                <table width="100%" cellpadding="0" cellspacing="0" style="min-width:100%;">
 
                  <tr>
                    <td style="padding:5px;">

                        <table class="smarttable" width="100%" cellpadding="0" cellspacing="0" style="min-width:100%;">
                          <thead>
                            <tr>
                              <th scope="col" style="padding:5px; font-family: Arial,sans-serif; font-size: 14px; line-height:10px;line-height:15px;color:#033047;text-align:left;background-color:#eee">QTY</th>
                              <th scope="col" style="padding:5px; font-family: Arial,sans-serif; font-size: 14px; line-height:10px;line-height:15px;color:#033047;text-align:left;background-color:#eee">UM</th>
                              <th scope="col" style="padding:5px; font-family: Arial,sans-serif; font-size: 14px; line-height:10px;line-height:15px;color:#033047;text-align:left;background-color:#eee">ITEM #</th>
                                   <th scope="col" style="padding:5px; font-family: Arial,sans-serif; font-size: 14px; line-height:20px;line-height:30px;color:#033047;text-align:left;background-color:#eee">DESCRIPTION</th>
                                   <th scope="col" style="padding:5px; font-family: Arial,sans-serif; font-size: 14px; line-height:10px;line-height:15px;color:#033047;text-align:left;background-color:#eee">UNIT PRICE</th>
                                   <th scope="col" style="padding:5px; font-family: Arial,sans-serif; font-size: 14px; line-height:10px;line-height:15px;color:#033047;text-align:left;background-color:#eee">EXTENDED PRICE</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td data-label="QTY" valign="top" style="padding:5px; font-family: Arial,sans-serif; font-size: 12px; line-height:20px;">12</td>
                              <td data-label="UM" valign="top" style="padding:5px; font-family: Arial,sans-serif; font-size: 12px; line-height:20px;">200R</td>
                              <td data-label="ITEM #" valign="top" style="padding:5px; font-family: Arial,sans-serif; font-size: 12px; line-height:20px;">T0406-70</td>
                              <td data-label="DESCRIPTION" valign="top" style="padding:5px; font-family: Arial,sans-serif; font-size: 12px; line-height:20px;">	DLT 4x6 WARNING AF OUTDOOR</td>
                              <td data-label="UNIT PRICE" valign="top" style="padding:5px; font-family: Arial,sans-serif; font-size: 12px; line-height:20px;">$214.99</td>
                              <td data-label="EXTENDED PRICE" valign="top" style="padding:5px; font-family: Arial,sans-serif; font-size: 12px; line-height:20px;">$2,579.88</td>
                            </tr>

             
                          </tbody>
                        </table>

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

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

  <!--[if gte mso 9]></td></tr></table>
                    <![endif]-->
    </center>

        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

[epeck-graphicproducts]

Here is the image. Is there something I can do to make you less cranky?

[ngarnier]

It’s impossible to help you without valid code to reproduce and understand your problem.

I did the work for you and here is a link with your code cleaned (note that even the code for your HTML table is wrong, with extra closing tags): https://mjml.io/try-it-live/Bk8L3yBFV. I don’t see any specific issue there?