Remove unwanted spacing ( ) between 2 table elements

Question

I need to create a page layout with <table> elements. The problem I have that it's being auto generated in the DOM extra unwanted spacing, in the form of &nbsp. How can I remove it?

See Images: Results:

The Challenge:

The challenge I have. I can only use inline styles & no javascript & I cannot use flex instead of tables. Since it's going to be used in emails. and not all email clients support flex yet.

<div style="width:375px;margin:0 auto;font-family: Helvetica,sans-serif;">
  <table style="width:100%;background-color: aliceblue;border-bottom: 1px #539ecb solid; 
                    border-top: 1px #539ecb solid;color: #334859; text-transform: uppercase;padding:0 15px;">
      <!-- Entries Header -->
      <tr>
          <td style="padding:3px 0;width: 47%;">
              <h5 style="margin:0;">Description</h5>
          </td>
          <td style="text-align: center;width: 25%;">
              <h5 style="margin:0;">Qty</h5>
          </td>&nbsp;
          <td style="text-align: right;">
              <h5 style="margin:0;">Amount</h5>
          </td>
      </tr>
  </table>
  <table style="width: 100%;padding:0 15px;">
      <!-- Entries -->
      <tr>
          <td style="padding:5px 0;width: 50%;">
              <span style="text-transform: uppercase;font-size: 13px;">Office desk</span>
          </td>
          <td style="padding:5px 0;text-align: center;width: 25%;">
              <small style="margin: 0;font-size: 11px;">2 x $217.75</small>
          </td>&nbsp;
          <td style="padding:5px 0;text-align:right;">
              <span style="margin: 0;font-size: 13px;">$435.50</span>
          </td>
      </tr>
  </table>
</div>

Answer 1

It seems like the issue is the  s you intentionally added within the table. HTML has strict rules about what can and can't be a direct child of the various table elements.

A text node can't be the direct child of a tr, which can contain only:

Zero or more td, th, and script-supporting elements.

Therefore, the   text nodes get pushed outside the table. Remove those, and the visual layout will be fixed (I'd still recommend fixing the semantics of the markup, though).

---

Original answer below

Your HTML is malformed in any case. What looks to be a table header row and body row are represented as 2 separate tables. Try something like this:

<table style="border-collapse: collapse;">
  <thead style="/* styles from what's currently your first table */">
    <tr>
      <!-- content from what's currently your first table -->
      <th>...</th>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody style="/* styles from what's currently your second table */">
    <tr>
      <!-- content from what's currently your second table -->
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>