如何在触及移动设备时将这些表格对齐到中心位置？
我需要在没有媒体查询的情况下执行此操作以支持Gmail移动应用。
HTML代码来自actionrocket codepen，但我不知道什么会使桌面以移动设备为中心而打破桌面视图
http://codepen.io/actionrocket/pen/EoCLH
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ededed">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style=" display:block; max-width:640px !important;" bgcolor="#ffffff">
<tr>
<td>
<table id="holder" class="wrapper" border="0" cellspacing="0" cellpadding="0" style="width:100%; max-width:640px !important;" align="center">
<tr><td align="center">
<!--[if mso]>
<table id="outlookholder" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td>
<![endif]-->
<!--[if (IE)]>
<table border="0" cellspacing="0" cellpadding="0" width="640" align="center"><tr><td>
<![endif]-->
<!--2 column-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="320" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="20"></td>
<td width="280" bgcolor="#ededed">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img style="display:block" border="0" src="http://placehold.it/100x100" width="100" height="100" alt=""/></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#454545; text-align:center;">Module title goes here</td>
<td width="2%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#454545; text-align:center;">Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</td>
<td width="2%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table width="160" border="0" cellspacing="0" cellpadding="0" class="w300" bgcolor="#a3a3a3">
<tr>
<td width="15"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:16px; line-height:20px; color:#ffffff; text-align:center;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
<a style="color:#FFFFFF; text-decoration:none;" href="#" target="_blank">Call to Action</a>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
</td>
<td width="15"></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20" bgcolor="#ffffff"></td>
</tr>
</table>
</td>
<td width="20"></td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table width="320" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td width="20"></td>
<td width="280" bgcolor="#ededed">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img style="display:block" border="0" src="http://placehold.it/100x100" width="100" height="100" alt=""/></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#454545; text-align:center;">Module title goes here</td>
<td width="2%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#454545; text-align:center;">Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</td>
<td width="2%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table width="160" border="0" cellspacing="0" cellpadding="0" class="w300" bgcolor="#a3a3a3">
<tr>
<td width="15"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:16px; line-height:20px; color:#ffffff; text-align:center;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
<a style="color:#FFFFFF; text-decoration:none;" href="#" target="_blank">Call to Action</a>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
</td>
<td width="15"></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
</td>
<td width="20"></td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr></table>
<!--[if mso]>
</td></tr></table>
<![endif]-->
<!--[if IE]>
</td></tr></table>
<![endif]-->
</td></tr></table>
</td></tr></table>
答案 0 :(得分：1)
我认为您不应该使用表格进行设计，请参阅Why not use tables for layout in HTML?如果要使用表格，则应使用CSS属性，例如：
display: table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;
此外，我发现您正在使用内联CSS样式。请参阅What's so bad about in-line CSS?简单地说，维护代码会变得非常困难和令人沮丧。
我使用了css-stylesheets（方便的东西）。在我看来，我没有使用任何难以理解的CSS属性。使用文本对齐中心完成定位。 （内联元素以位置为中心）。添加填充和边距以使更多空间。二手盒子尺寸：边框;即使我添加填充也要保持大小。
width 100px + padding-top: 20px 的大小通常为 120px ;使用box-sizing维护100px。
.module的节类。使用内联块显示属性，元素包装。因此，如果页面上有很多宽度，模块将彼此相邻显示。如果它们很少，它们将在彼此之下显示。
.module {
display: inline-block;
background-color: #ddd;
width: 300px;
height: 300px;
padding-top: 30px;
box-sizing: border-box;
font-family: arial;
text-align: center;
margin: 5px;
}
.module img {
display: block;
margin: 0 auto;
width: 100px;
}
.module h1 {
font-weight: normal;
}
.invers {
border: none;
background-color: #aaa;
padding: 10px 20px;
font-size: 1em;
color: white;
cursor: pointer;
}<div class="wrapper">
<section class="module">
<img src="http://lorempixel.com/image_output/animals-q-g-100-100-7.jpg" />
<h1>Module title goes here</h1>
<p>Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</p>
<button class="invers">Call to Action</button>
</section>
<section class="module">
<img src="http://lorempixel.com/image_output/animals-q-g-100-100-7.jpg" />
<h1>Module title goes here</h1>
<p>Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</p>
<button class="invers">Call to Action</button>
</section>
<br>
<h1>HERE is what happens if the screen gets small:</h1>
<section class="module">
<img src="http://lorempixel.com/image_output/animals-q-g-100-100-7.jpg" />
<h1>Module title goes here</h1>
<p>Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</p>
<button class="invers">Call to Action</button>
</section>
<br>
<section class="module">
<img src="http://lorempixel.com/image_output/animals-q-g-100-100-7.jpg" />
<h1>Module title goes here</h1>
<p>Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</p>
<button class="invers">Call to Action</button>
</section>
</div>
答案 1 :(得分：1)
您很难为Gmail执行此操作。由于每列的包含表都是左对齐的，因此您无法将它们覆盖到某些列。您最好的选择是强制使用Gmail用户的桌面视图，或使用Gmail＆amp ;;创建电子邮件。考虑到Outlook，然后使用CSS和媒体查询来允许iOS用户。