Html 折叠媒体查询中的表格单元格以发送电子邮件
我必须创建一个电子邮件html，我可以说这绝对是一件很难做到的事情。现在，确保它的响应性已经不再令人讨厌了。 我现在被一个似乎无法解决的问题困住了 问题是：我有一个有3列的表（第1列是表，第2列是间隔列，第3列是表）。 当我移动时，我希望第三列在第1列下。但不管我怎么努力，我都做不到 请注意，无法使用显示参数。这很重要。谷歌邮件不知道显示意味着什么（…） 唯一可以使用的是：浮动和对齐 这是我的名片 follow us和contact us单元格位于同一表格中；那张桌子必须放在第一张桌子下面。我现在还没有达到那种效果Html 折叠媒体查询中的表格单元格以发送电子邮件,html,css,email,responsive-design,Html,Css,Email,Responsive Design,我必须创建一个电子邮件html，我可以说这绝对是一件很难做到的事情。现在，确保它的响应性已经不再令人讨厌了。 我现在被一个似乎无法解决的问题困住了 问题是：我有一个有3列的表（第1列是表，第2列是间隔列，第3列是表）。 当我移动时，我希望第三列在第1列下。但不管我怎么努力，我都做不到 请注意，无法使用显示参数。这很重要。谷歌邮件不知道显示意味着什么（…） 唯一可以使用的是：浮动和对齐 这是我的名片 follow us和contact us单元格位于同一表格中；那张桌子必须放在第一张桌子下面。我现
<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>
跟我们来！
联系我们！
50/54
92100
+33 14900 www.mail.fr
courrier@mail.fr
td[class="responsive-grey"],
td[class="responsive-grey responsive-grey-spacing"],
td[class="align-top grey responsive-grey"] {
float: left; width:100%;
}
基本上在所有三列上都向左浮动这在outlook中是否可行？（最好不要^^^）我的电子邮件在outlook for desktop中已经可以正常工作了。我只需要移动版本就可以工作，这意味着大部分是android，因为它在iosReal表列上工作良好，永远不会在另一个相同级别的列下工作。绝对没有办法。你没有找到解决方案，因为它不存在。唯一的方法是使用div定义表并使用
display:table