mjml: 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>