Why are the columns in my html table not uniform when scaling down

Question

I am building out an email to be compatible across all devices/screen sizes. Since it is an email, I have to use tables which as we all know were spawned in hell. I am having an issue where I have three columns side-by-side with identical code but the middle column is getting squished on small screens - I cannot for the life of me figure out how to prevent this. Anyone have any ideas. The ideal scenario would be to have the layout just scale down on smaller screens rather than the columns getting more narrow.

Code:

    <table style="text-align: center;width: 100%;border-collapse: collapse;background-color: white;">
      <tbody>
        <tr class="desktop" width="600">
          <td class="content" style="background-color: white;"><img src="https://static.cdn.responsys.net/i5/responsysimages/content/hugobossf/free-shipping.jpg" style="max-width: 100%;margin: 0 auto;display: block;" />
          </td>
        </tr>
      </tbody>
    </table>
    <table class="three-column" style="text-align: center;width: 100%;border-collapse: collapse;background-color: white;">
      <tbody>
        <tr width="660">
          <td class="content spacer-cell" height="75px" style="width: 2%;background-color: white;">
          </td>
          <td class="content" style="background-color: white;"><a href="${clickthrough('Second_T3_Img1')}"><img src="https://static.cdn.responsys.net/i5/responsysimages/content/hugobossf/time.png" style="max-width: 100%;margin: 0 auto;display: block;" /></a>
          </td>
          <td class="content" style="background-color: white;[![enter image description here][1]][1]"><a href="${clickthrough('Second_T3_Img2')}"><img src="https://static.cdn.responsys.net/i5/responsysimages/content/hugobossf/chat.png" style="max-width: 100%;margin: 0 auto;display: block;" /></a>
          </td>
          <td class="content" style="background-color: white;"><a href="${clickthrough('Second_T3_Img3')}"><img src="https://static.cdn.responsys.net/i5/responsysimages/content/hugobossf/chat.png" style="max-width: 100%;margin: 0 auto;display: block;" /></a>
          </td>
          <td class="content spacer-cell" height="75px" style="width: 10px;background-color: white;">
          </td>
        </tr>
        <tr>
          <td class="content spacer-cell" height="105px" style="width: 10px;background-color: white;">
          </td>
          <td class="content" style="background-color: white;">
            <p style="font-family:'Univers', Arial, sans-serif;font-size: 16px;font-weight: 700;margin-top:0px;">WE ARE HERE FOR YOU
            </p>
            <p class="label-heading"><a class="label-cta" href="${clickthrough('Second_T3_Prod1_CTA')}" style="font-family:'Univers', Arial, sans-serif;color: #000000;text-decoration: none;padding-bottom: 2px;font-size: 14px;margin-top: 0px;display: block;">Have a style question?
              <br />
              Need size advice?
              <br />
              Chat with us!</a>
            </p>
            <p>
            </p>
          </td>
          <td class="content" style="background-color: white;">
            <p class="label-heading" style="font-family:'Univers', Arial, sans-serif;font-size: 16px;font-weight: 700;margin-top:0;">NEED MORE TIME?
            </p>
            <p><a class="label-cta" href="${clickthrough('Second_T3_Prod1_CTA')}" style="font-family:'Univers', Arial, sans-serif;color: #000000;text-decoration: none;padding-bottom: 2px;font-size: 14px;margin-top: 0px;display: block;">For your convenience,
              <br />
              we have extended our
              <br />
              return policy to 60 days.</a>
            </p>
          </td>
          <td class="content" style="background-color: white;">
            <p class="label-heading" style="font-family:'Univers', Arial, sans-serif;font-size: 16px;font-weight: 700;margin-top:0;">NEED MORE TIME?
            </p>
            <p><a class="label-cta" href="${clickthrough('Second_T3_Prod1_CTA')}" style="font-family:'Univers', Arial, sans-serif;color: #000000;text-decoration: none;padding-bottom: 2px;font-size: 14px;margin-top: 0px;display: block;">Our Customer Service team is
              <br />
              happy to assist you 24/7 at
              <br />
              1-800-HUGOBOSS</a>
            </p>
          </td>
          <td class="content spacer-cell" height="105px" style="width: 2%;background-color: white;">
          </td>
        </tr>
        <tr class="spacer-5" style="height: 5px;">
        </tr>
      </tbody>
    </table>

score 1 · Answer 1 · answered Mar 30 '20 at 22:23

1

at WE ARE HERE FOR YOU you dont have a class defined while at the other two items you have class="label-heading"

answered Mar 30 '20 at 22:23

Scoopex

463
3
11

score 0 · Answer 2 · answered Sep 15 '20 at 10:31

There a few things wrong here. Each <TD> must be the same size if you have rows after eachother in the same table. You little spacers are 2% in first <tr>, and 10px in next <tr>. Besides that, you need to make a width in all the 's, otherwise the mail client dosnt how big it should be and makes a quess. And finally you cant make a width on a <tr> tag.

Try with this code:

   <table cellpadding="0" cellspacing="0" border="0"style="text-align: center;width: 100%;border-collapse: collapse;background-color: white;">
      <tbody>
        <tr class="desktop" width="600">
          <td class="content" style="background-color: white;"><img src="https://static.cdn.responsys.net/i5/responsysimages/content/hugobossf/free-shipping.jpg" style="max-width: 100%;margin: 0 auto;display: block;" />
          </td>
        </tr>
      </tbody>
    </table>

    <table cellpadding="0" cellspacing="0" border="0" class="three-column" style="text-align: center;width: 100%;border-collapse: collapse;background-color: white;">
        <tr>
            <td width="660">
                <table>
                    <tr>
                        <td width="2%" style="font-size: 0px; line-height: 0px;">&nbsp;</td>
                        <td width="30%" style="padding:1% 0">
                            <table cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td><a href="${clickthrough('Second_T3_Img1')}"><img src="https://static.cdn.responsys.net/i5/responsysimages/content/hugobossf/time.png" style="max-width: 100%;margin: 0 auto;display: block;" /></a></td>
                                </tr>
                                <tr>
                                    <td style="padding: 10px 0 0; font-family:'Univers', Arial, sans-serif;font-size: 16px;font-weight: 700;margin-top:0px;">WE ARE HERE FOR YOU</td>
                                </tr>
                                <tr>
                                    <td><a class="label-cta" href="${clickthrough('Second_T3_Prod1_CTA')}" style="padding: 10px 0;font-family:'Univers', Arial, sans-serif;color: #000000;text-decoration: none;padding-bottom: 2px;font-size: 14px;margin-top: 0px;display: block;">Have a style question?
                                        <br />
                                        Need size advice?
                                        <br />
                                        Chat with us!</a></td>
                                </tr>
                            </table>                            
                        </td>
                        <td width="30%" style="padding:1% 0">
                            <table cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td><a href="${clickthrough('Second_T3_Img1')}"><img src="https://static.cdn.responsys.net/i5/responsysimages/content/hugobossf/time.png" style="max-width: 100%;margin: 0 auto;display: block;" /></a></td>
                                </tr>
                                <tr>
                                    <td style="padding: 10px 0 0; font-family:'Univers', Arial, sans-serif;font-size: 16px;font-weight: 700;margin-top:0px;">WE ARE HERE FOR YOU</td>
                                </tr>
                                <tr>
                                    <td><a class="label-cta" href="${clickthrough('Second_T3_Prod1_CTA')}" style="padding: 10px 0;font-family:'Univers', Arial, sans-serif;color: #000000;text-decoration: none;padding-bottom: 2px;font-size: 14px;margin-top: 0px;display: block;">Have a style question?
                                        <br />
                                        Need size advice?
                                        <br />
                                        Chat with us!</a></td>
                                </tr>
                            </table>                            
                        </td>
                        <td width="30%" style="padding:1% 0">
                            <table cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td><a href="${clickthrough('Second_T3_Img1')}"><img src="https://static.cdn.responsys.net/i5/responsysimages/content/hugobossf/time.png" style="max-width: 100%;margin: 0 auto;display: block;" /></a></td>
                                </tr>
                                <tr>
                                    <td style="padding: 10px 0 0; font-family:'Univers', Arial, sans-serif;font-size: 16px;font-weight: 700;margin-top:0px;">WE ARE HERE FOR YOU</td>
                                </tr>
                                <tr>
                                    <td><a class="label-cta" href="${clickthrough('Second_T3_Prod1_CTA')}" style="padding: 10px 0;font-family:'Univers', Arial, sans-serif;color: #000000;text-decoration: none;padding-bottom: 2px;font-size: 14px;margin-top: 0px;display: block;">Have a style question?
                                        <br />
                                        Need size advice?
                                        <br />
                                        Chat with us!</a></td>
                                </tr>
                            </table>                            
                        </td>                       

                        <td width="2%" style="font-size: 0px; line-height: 0px;">&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

I can see you are playing with Responsys, say if you need any help there, I have worked with Responsys for +10 years now.

Why are the columns in my html table not uniform when scaling down

2 Answers2