Remove unwanted spacing ( ) between 2 table elements - html

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

Answer 2

You can replace the s with empty string.
document.querySelector("#our_div").innerHTML = document.querySelector("#our_div").innerHTML.replace(/ /g, '');
<div id="our_div" style="width:375px;margin:0 auto;font-family: Helvetica,sans-serif;display:block;">
<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>
<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 class="item-name" style="text-transform: uppercase;font-size: 13px;">Office desk</span>
</td>
<td style="padding:5px 0;text-align: center;width: 25%;">
<small class="qty" style="margin: 0;font-size: 11px;">2 x $217.75</small>
</td>
<td style="padding:5px 0;text-align:right;">
<span class="item-price" style="margin: 0;font-size: 13px;">$435.50</span>
</td>
</tr>
</table>
</div>
Here is pure CSS solution. Adjust font-size:0 to div and font-size:1rem to tables. CSS can't remove it, but can hide.
#our_div {
font-size:0;
}
#our_div table {
font-size:1rem;
}
<div id="our_div" style="width:375px;margin:0 auto;font-family: Helvetica,sans-serif;font-size:0;">
<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>
<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 class="item-name" style="text-transform: uppercase;font-size: 13px;">Office desk</span>
</td>
<td style="padding:5px 0;text-align: center;width: 25%;">
<small class="qty" style="margin: 0;font-size: 11px;">2 x $217.75</small>
</td>
<td style="padding:5px 0;text-align:right;">
<span class="item-price" style="margin: 0;font-size: 13px;">$435.50</span>
</td>
</tr>
</table>
</div>

Answer 3

It would be far better to do that with JS. In CSS you can try to set some font styles for the div container to hide the " " characters and set the styles to their initial values for the tables (so they do not inherit values from the container).
div{
font-size:0;
line-height:0;
color: transparent;
user-select: none;
}
div>table{
font-size: 16px; //or any other
line-height: normal; //or any other
color: black; //or any other
user-select: auto;
}