Table slightly breaks when zooming in and out of page

Question

I am using tables to structure a HTML email.

When I view the page at 90% zoom (on Chrome), my tables look fine. But when I zoom to 100% and beyond, my table shifts by a few pixels, and I don't know why.

90% Zoom:

100% Zoom (and beyond):

I want each td to have max-height: 286px; max-width:332px; and have set it up that why, but it still breaks beyond these parameters, why?

<table bgcolor="#0a1219" border="0" cellpadding="0" cellspacing="0" style="max-width:692px;background-color:#0a1219;" width="692">
  <tbody>
    <tr>
      <!------------->
      <!-- IMAGE 1 -->
      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; max-height: 286px; max-width:332px;" valign="bottom">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <tr>
              <!-- IMAGE -->
              <td align="right" style="font-family:'Arial',Helvetica,sans-serif;">
                <a href="#" target="_blank">
                  <img alt="Image-1" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/block-1.png" style="display:block;border:0px;font-family:Helvetica,Arial,sans-serif;color:#ffffff" height="284">
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <!------------->
      <!-- IMAGE 2 -->
      <td align="left" style="font-family:Arial,Helvetica,sans-serif;padding-right:22px; max-height: 286px; max-width:332px;" valign="bottom">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <!--ROW 1 IMAGE -->
            <tr>
              <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; background-color:#00adf2;">
                <img alt="Speech marks" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/speech.png" style="display:block;border:0px;font-family:Arial, Helvetica,sans-serif;color:#ffffff; padding-top: 3px;" width="310">
              </td>
            </tr>
            <!--ROW 1 TEXT -->
            <tr>
              <td align="center" style="background-color:#00adf2; font-family:Arial;font-size:14px;line-height:20px;color:#fff; text-align: center;">
                Faceate volorunt uta quo moditas
                <br> et labo. Comnima iorehent hit est
                <br> am vit elit volores cimpossime
                <br> serchit, oditiis rehenis volor
                <br> sequisqui ut late cus. Faceate
                <br> volorunt uta quo moditas et labo.
                <br> Comnima ioreh.
              </td>
            </tr>
            <tr>
              <!--ROW 3 LINE -->
              <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding: 22px;background-color:#00adf2;vertical-align:top;">
                <!-- NESTED TABLE -->
                <table border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; width: 100%;" width="100%">
                        <!-- TABLE FOR LINE -->
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                          <tbody>
                            <tr>
                              <td align="center" bgcolor="#fff" height="3" style="height:4px;width:50px;font-size:0px;" width="50"></td>
                            </tr>
                          </tbody>
                        </table>
                        <td style="padding-bottom:18px;"></td>
                        <!-- TABLE FOR LINE END -->
                      </td>
                      <!-- LINE END -->
                    </tr>
                  </tbody>
                </table>
                <!-- NESTED TABLE END -->
              </td>
            </tr>
          </tbody>
        </table>
      </td>

      <!-- FIRST ROW CLOSE -->
    </tr>
  </tbody>
</table>

Edit:

When I remove a line from the text:

When it breaks the layout, try to remove some words from the copy and see if the issue is related to the number of lines. — Adriano, Jan 22 '18 at 09:54
When I remove a line, the whole td falls down. I've added an image to the question to show what I mean. — Freddy, Jan 22 '18 at 10:07
@Constantin ah yes, I've removed that, but now the situation is reversed. The image of the man is higher than the the second blue block? — Freddy, Jan 22 '18 at 10:33
@Constantin - I want to avoid divs. As mentioned, this is for a HTML email. Many email clients break layouts if div's are involved. — Freddy, Jan 22 '18 at 10:53
Also, your table has a wrong nesting hierarchy... There is a `` in the wrong position, or the sibling table is in the wrong place. — Adriano, Jan 22 '18 at 11:46
DO not use DIVs. Code like it's 2002. max-height and max-width are seriously problematic, and you are better off just setting a hard width/height inside your tables. — scoopzilla, Jan 22 '18 at 17:12

score 0 · Answer 1 · answered Jan 22 '18 at 11:24

here i try your code in internet explorer and firefox x64 ,i don't have chrome (for me is useless as ie is)! here was only a valign problem how you see pressing the button Run COde Snippet

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus® editplus.com DA BEST EDITOR IN THE WORLD FROM SOUTH KOREA">
  <title>MY STUPID FIX</title>
 </head>
 <body>
  <table bgcolor="#0a1219" border="0" cellpadding="0" cellspacing="0" style="max-width:692px;background-color:#0a1219;" width="692">
  <tbody>
    <tr>
      <!------------->
      <!-- IMAGE 1 -->
      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; max-height: 286px; max-width:332px;" valign="top">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <tr>
              <!-- IMAGE -->
              <td align="right" style="font-family:'Arial',Helvetica,sans-serif;">
                <a href="#" target="_blank">
                  <img alt="Image-1" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/block-1.png" style="display:block;border:0px;font-family:Helvetica,Arial,sans-serif;color:#ffffff" height="284">
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <!------------->
      <!-- IMAGE 2 -->
      <td align="left" style="font-family:Arial,Helvetica,sans-serif;padding-right:22px; max-height: 286px; max-width:332px;" valign="top">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <!--ROW 1 IMAGE -->
            <tr>
              <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; background-color:#00adf2;">
                <img alt="Speech marks" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/speech.png" style="display:block;border:0px;font-family:Arial, Helvetica,sans-serif;color:#ffffff;" width="310">
              </td>
            </tr>
            <!--ROW 1 TEXT -->
            <tr>
              <td align="center" style="background-color:#00adf2; font-family:Arial;font-size:14px;line-height:20px;color:#fff; text-align: center;">
                Faceate volorunt uta quo moditas
                <br> et labo. Comnima iorehent hit est
                <br> am vit elit volores cimpossime
                <br> serchit, oditiis rehenis volor
                <br> sequisqui ut late cus. Faceate
                <br> volorunt uta quo moditas et labo.
                <br> Comnima ioreh.
              </td>
            </tr>
            <tr>
              <!--ROW 3 LINE -->
              <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding: 22px;background-color:#00adf2;vertical-align:top;">
                <!-- NESTED TABLE -->
                <table border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; width: 100%;" width="100%">
                        <!-- TABLE FOR LINE -->
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                          <tbody>
                            <tr>
                              <td align="center" bgcolor="#fff" height="3" style="height:4px;width:50px;font-size:0px;" width="50"></td>
                            </tr>
                          </tbody>
                        </table>
                        <td style="padding-bottom:18px;"></td>
                        <!-- TABLE FOR LINE END -->
                      </td>
                      <!-- LINE END -->
                    </tr>
                  </tbody>
                </table>
                <!-- NESTED TABLE END -->
              </td>
            </tr>
          </tbody>
        </table>
      </td>

      <!-- FIRST ROW CLOSE -->
    </tr>
  </tbody>
</table>
 </body>
</html>

Table slightly breaks when zooming in and out of page

1 Answers1