我正在构建一封电子邮件以兼容所有设备/屏幕尺寸。因为它是一封电子邮件，所以我必须使用众所周知的在地狱中产生的表格。我遇到了一个问题，我有三列并排使用相同的代码，但中间列在小屏幕上被压扁 - 我一生无法弄清楚如何防止这种情况。有人有想法么。理想的情况是让布局在较小的屏幕上按比例缩小，而不是让列变得更窄。
代码：
<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>
