我必须创建一个电子邮件html，我可以说这绝对是一件难事。现在，确保它的响应性是令人讨厌的。 我现在被困在一个看似无法解决的问题上。
问题在于：我有一个包含3列的表（第1列是表，第2列是spacer列，第3列是表）。 当我移动时，我希望第三列在第1列之下。但无论我尝试什么，我都无法做到。
请注意，使用显示参数CANT。这非常重要。谷歌邮件不知道显示的含义（...） 唯一可以使用的是：float和align。
这是我的jsfiddle https://jsfiddle.net/cnw0o3wy/ 关注我们并联系我们细胞在同一张桌子上;该表必须位于第一个表下。我现在没能达到那个效果
<tr>
<td>
<table align="center">
<tr>
<td class="align-top grey responsive">
<table border="0" cellpadding="0" cellspacing="0" width="307">
<tbody>
<tr class="grey">
<td class="align-top"colspan="3"><img alt="" src="images/mobile.png" /></td>
</tr>
<tr class="grey">
<td width="113" class="w113"> </td>
<td>
<a href="#" title="Apple Store"><img src="images/appstore.png" title="Apple Store" /></a>
</td>
<td>
<a href="#" title="Google Play"><img src="images/googleplay.png" title="Google Play" /></a>
</td>
</tr>
</tbody>
</table>
</td>
<td width="4"class="responsive">
</td>
<td class="responsive">
<table border="0" cellpadding="0" cellspacing="0" width="307" class="w307">
<tbody class="grey">
<tr class="grey">
<td class="align-top grey">
<table cellpadding="0" cellspacing="0" width="151" class="w151">
<tbody class="grey">
<tr>
<td style="line-height:6px;" height="6" width="151" class="w151"> </td>
</tr>
<tr>
<td style="padding-left: 7px;" class="t-gris px12 bold align-top">Follow us !</td>
</tr>
<!-- 32 PX SPACING -->
<tr>
<td height="36" width="151" class="w151"><img src="images/shim.png" alt="" height="31" /> </td>
</tr>
<tr class="align-center">
<td>
<a href="#" title="Facebook"><img class="social" src="images/fb.png" alt="Facebook" /></a>
<a href="#" title="Twitter"><img class="social" src="images/twitter.png" alt="Twitter" /></a>
<a href="#" title="Mail"><img class="social" src="images/mail.png" alt="Mail" /></a>
</td>
</tr>
</tbody>
</table>
</td>
<td class="white">
<img alt="" src="images/shim.png" width="4" />
</td>
<td class="align-top grey">
<table cellpadding="0" cellspacing="0" width="151" class="w151">
<tbody class="grey">
<tr>
<td style="line-height:6px;" height="6" width="151" class="w151"> </td>
</tr>
<tr>
<td style="padding-left: 7px;" class="px12 bold t-gris align-top">Contact us !</td>
</tr>
<tr>
<td><img alt="" src="images/logo2.png" /></td>
</tr>
<tr>
<td style="padding-left: 7px;" class="px10 t-gris bold">
50/54 <br/>92100 <br/>+33 1 49 00 00 00 www.mail.fr
<span style="text-decoration: underline;">
courrier@mail.fr
</span>
</td>
</tr>
<tr>
<td style="line-height:7px;"height="7" width="151" class="w151"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
答案 0 :(得分：0)
通过以下几行解决了我的问题：
td[class="responsive-grey"],
td[class="responsive-grey responsive-grey-spacing"],
td[class="align-top grey responsive-grey"] {
float: left; width:100%;
}
基本上在所有三列上左移