Remove unwanted spacing ( ) between 2 table elements

user_5715852 0
Viewed 1171

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: enter image description here Results: enter image description here

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>

html-table css html
3 Answers

It seems like the issue is the &nbsp;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 &nbsp; 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>
user_83187310

You can replace the &nbsp;s with empty string.

document.querySelector("#our_div").innerHTML = document.querySelector("#our_div").innerHTML.replace(/&nbsp;/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>&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 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>&nbsp;
                <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>&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 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>&nbsp;
                <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>

user_106987410

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;
}
user_53883900
Related