我很遗憾地问另一个关于html电子邮件的问题，但是html电子邮件比我想象的要复杂得多。
当用户在桌面（大屏幕）客户端上查看电子邮件时，我希望彼此相邻有两列，并且我希望在移动客户端上查看时，这两列相同的列可以叠加在一起。
我知道我的apporach是错的，因此它不起作用。
我创建了2个表，默认情况下是块元素。我正在努力使这两个表与MEDIA QUERY内联。
默认情况下，这两个表是块元素，但我想让它们仅在大屏幕上内联，并将它们保留为移动屏幕上的默认值。
GMAIL 问题：我创建了以下代码，但由于某些原因，当我在Gmail.com帐户上查看电子邮件时，2列（表格）不会内联。它们仍然是块元素。
当我在雅虎或浏览器上查看此电子邮件时，这两个表彼此相邻（内联），没有问题。
<table width="100%" bgcolor="#f6f8f1" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="100%" class="wrapper" align="center" cellpadding="0" cellspacing="0" border="0" style="max-width:600px; border:1px #666666 solid;">
<tr>
<td>
<!-- 1st Row -->
<table width="100%" align="center" bgcolor="002B70" border="0" cellpadding="5" cellspacing="0">
<tr>
<td>
<!-- 1st table column. Block element by default. want this to be inline element on all DESKTOP clients, but leave it as default on mobile clients -->
<table class="desktop-column">
<tr>
<td style="text-align:center;">
<a href="#" style="text-decoration:none; color:#ffffff">
<img src="#" alt="#" />
</a>
</td>
</tr>
</table>
<!-- 2nd table. Block element by default, want this to be inline element on all DESKTOP clients, but leave it as default on mobile clients -->
<table class="desktop-column">
<tr>
<td style="text-align:center;" id="menu">
<a href="#" style="text-decoration:none;color:#ffffff">MENU1</a>
<a href="#" style="text-decoration:none;color:#ffffff">MENU2</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
CSS如下：
@media screen and (min-device-width: 601px), screen and (min-width:601px) {
/* GMAIL.com IGNORING THIS. I want this element to be inline on DESKTOP clients */
*[class="desktop-column"] {display: inline-block!important; background-color:red;}
}
@media screen and (max-width: 525px) {
*[id="menu"] {font-size:12px;}
}
感谢您的帮助，