How do I fix an html rendering issue in Google Inbox (not present in Gmail) that adds abbreviation points

I have created this email layout below, and cannot for the life of me figure out why Gmail renders it correctly, but Inbox renders it horribly.

Upon inspection, it is for some reason separating a bunch of stuff into their own table elements. Anyone see something I'm missing. I'm very new to html for email, and am constantly shocked at how bad it can be.

<body style="margin:0; padding:0; width:100% !important; font-family: verdana;">
<table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center">
    <tr>
        <td>
        <table cellpadding="20" cellspacing="0" border="0" align="center">
            <tr>
                <td valign="top" align="center"><span style="color: rgb(44, 160, 209); font-size: 24px; font-family: verdana;">shift</span><span style="color: rgb(235, 42, 83); font-size: 24px; font-family: verdana; font-weight: bold;">Swap</span></td>
            </tr>
      </table>
    </td>
  </tr>
  <!-- This is where your content goes bro -->
  <tr>
    <td>
        <table width="600" bgcolor="#FFF" align="center" style="border-radius:8px;">
          <tr>
            <td style="padding: 35px;">
              <h3>
                Welcome <span style="text-decoration: none;"><%= @email %></span>!
              </h3>
              <div>
                <span style="display: block;">You can confirm your account email through the link below:</span>
                <br>
                <a href="<%= confirmation_url(@resource, confirmation_token: @token) %>" target ="_blank" style="display: block; color: orange; text-decoration: none; font-size: 150%;">Confirm your account</a>
                <br>
                <span style="display: block;">Or paste the following into the address bar: <%= confirmation_url(@resource, confirmation_token: @token) %></span>
                <h3 style="padding-top: 20px;">Thanks for signing up. We're looking forward to seeing you on the site!</h3>
              </div>
            </td>
          </tr>
        </table>
        </td>
    </tr>
    <tr>
        <td>
            <table width="600" align="center" cellpadding="50">
                <tr align="center"><td style="color: #2b2b2b";>Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©<%= Time.new.year %></td></tr>
            </table>
        </td>
    </tr>
</table>
</body>

Here is what it looks like when Inbox for some reason hides the entire message, which seems to happen when I send a "reconfirm" message:

And Gmail:

Solution

I really recommend to take out all non table elements, since even if it is 2016, mail clients are way behind

<body style="margin:0; padding:0; width:100% !important; font-family: verdana;">
  <table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center">
    <tr>
      <td>
        <table cellpadding="20" cellspacing="0" border="0" align="center">
          <tr>
            <td valign="top" width="50%" align="right" style="color: rgb(44, 160, 209); font-size: 24px; font-family: verdana;padding-right: 0">
              shift              
            </td>
            <td valign="top" align="left" style="color: rgb(235, 42, 83); font-size: 24px; font-family: verdana; font-weight: bold;padding-left: 0">
              Swap
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <!-- This is where your content goes bro -->
    <tr>
      <td style="padding: 35px;background: #FFF">
        <table width="600" bgcolor="#FFF" align="center" style="border-radius:8px;">
          <tr>
            <td style="text-decoration: none; font-size: 22px">
              Welcome
              @ email !
            </td>
          </tr>
          <tr>
            <td style="padding-top: 20px; font-size: 22px">
              You can confirm your account email through the link below:
            </td>            
          </tr>
          <tr>
            <td>
              <a href="<%= confirmation_url(@resource, confirmation_token: @token) %>" target="_blank" style="display: block; color: orange; text-decoration: none; font-size: 150%;">Confirm your account</a>
            </td>
          </tr>
          <tr>
            <td>
              Or paste the following into the address bar:
              confirmation_url
            </td>
          </tr>
          <tr>
            <td style="padding: 20px 0; font-size: 22px">
              Thanks for signing up. We're looking forward to seeing you on the site!
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table width="600" align="center" cellpadding="50">
          <tr align="center">
            <td style="color: #2b2b2b">Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©
              <%=T ime.new.year %>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>