title: Align tables to be centered on mobile
body: <p>How can I align these tables to centered when it hits mobile?</p>
  
  <p>I need to do this without media queries to support the Gmail mobile app.</p>
  
  <p>The HTML code is from an actionrocket codepen, but i don't know what will make the tables centered on mobile with breaking the desktop view</p>
  
  <p><a href="http://codepen.io/actionrocket/pen/EoCLH" rel="nofollow noreferrer">http://codepen.io/actionrocket/pen/EoCLH</a></p>
  
  <pre><code>        &lt;table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ededed"&gt; 
          &lt;tr&gt;
              &lt;td&gt;
  
              &lt;table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style=" display:block; max-width:640px !important;" bgcolor="#ffffff"&gt;
              &lt;tr&gt;
                  &lt;td&gt;
  
                  &lt;table id="holder" class="wrapper" border="0" cellspacing="0" cellpadding="0" style="width:100%; max-width:640px !important;" align="center"&gt;
                  &lt;tr&gt;&lt;td align="center"&gt;
                  &lt;!--[if mso]&gt;
                      &lt;table id="outlookholder" border="0" cellspacing="0" cellpadding="0" align="center"&gt;&lt;tr&gt;&lt;td&gt;
                  &lt;![endif]--&gt;
                  &lt;!--[if (IE)]&gt;
                      &lt;table border="0" cellspacing="0" cellpadding="0" width="640" align="center"&gt;&lt;tr&gt;&lt;td&gt;
                  &lt;![endif]--&gt;  
  
  
                  &lt;!--2 column--&gt;
                  &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                      &lt;table width="320" border="0" cellspacing="0" cellpadding="0" align="left"&gt;
                          &lt;tr&gt;
                          &lt;td width="20"&gt;&lt;/td&gt;
                          &lt;td width="280" bgcolor="#ededed"&gt;
                          &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                              &lt;tr&gt;
                              &lt;td width="100%" height="20"&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                              &lt;tr&gt;
                              &lt;td align="center"&gt;&lt;img style="display:block" border="0" src="http://placehold.it/100x100" width="100" height="100" alt=""/&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                              &lt;tr&gt;
                              &lt;td width="100%" height="20"&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                              &lt;tr&gt;
                              &lt;td width="2%"&gt;&lt;/td&gt;  
                              &lt;td style="font-family:arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#454545; text-align:center;"&gt;Module title goes here&lt;/td&gt;
                              &lt;td width="2%"&gt;&lt;/td&gt; 
                              &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                              &lt;tr&gt;
                              &lt;td width="100%" height="20"&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                              &lt;tr&gt;
                              &lt;td width="2%"&gt;&lt;/td&gt; 
                              &lt;td style="font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#454545; text-align:center;"&gt;Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.&lt;/td&gt;
                              &lt;td width="2%"&gt;&lt;/td&gt; 
                              &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                              &lt;tr&gt;
                              &lt;td width="100%" height="20"&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                              &lt;tr&gt;
                              &lt;td align="center"&gt;
                              &lt;table width="160" border="0" cellspacing="0" cellpadding="0" class="w300" bgcolor="#a3a3a3"&gt;
                                  &lt;tr&gt;
                                      &lt;td width="15"&gt;&lt;/td&gt;
                                      &lt;td style="font-family:arial, Helvetica, sans-serif; font-size:16px; line-height:20px; color:#ffffff; text-align:center;"&gt;
                                      &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                                      &lt;tr&gt;
                                          &lt;td width="100%" height="10"&gt;&lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;/table&gt;
                                      &lt;a style="color:#FFFFFF; text-decoration:none;" href="#" target="_blank"&gt;Call to Action&lt;/a&gt;
                                      &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                                      &lt;tr&gt;
                                          &lt;td width="100%" height="10"&gt;&lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;/table&gt;
                                      &lt;/td&gt;
                                      &lt;td width="15"&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                              &lt;tr&gt;
                              &lt;td width="100%" height="20"&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                              &lt;tr&gt;
                              &lt;td width="100%" height="20" bgcolor="#ffffff"&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;/td&gt;
                          &lt;td width="20"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                      &lt;!--[if mso]&gt;&lt;/td&gt;&lt;td&gt;&lt;![endif]--&gt;
                      &lt;table width="320" border="0" cellspacing="0" cellpadding="0" &gt;
                          &lt;tr&gt;
                          &lt;td width="20"&gt;&lt;/td&gt;
                          &lt;td width="280" bgcolor="#ededed"&gt;
                          &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                              &lt;tr&gt;
                              &lt;td width="100%" height="20"&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                              &lt;tr&gt;
                              &lt;td align="center"&gt;&lt;img style="display:block" border="0" src="http://placehold.it/100x100" width="100" height="100" alt=""/&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                              &lt;tr&gt;
                              &lt;td width="100%" height="20"&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                              &lt;tr&gt;
                              &lt;td width="2%"&gt;&lt;/td&gt; 
                              &lt;td style="font-family:arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#454545; text-align:center;"&gt;Module title goes here&lt;/td&gt;
                              &lt;td width="2%"&gt;&lt;/td&gt; 
                              &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                              &lt;tr&gt;
                              &lt;td width="100%" height="20"&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                              &lt;tr&gt;
                              &lt;td width="2%"&gt;&lt;/td&gt; 
                              &lt;td style="font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#454545; text-align:center;"&gt;Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.&lt;/td&gt;
                              &lt;td width="2%"&gt;&lt;/td&gt; 
                              &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                              &lt;tr&gt;
                              &lt;td width="100%" height="20"&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                              &lt;tr&gt;
                              &lt;td align="center"&gt;
                              &lt;table width="160" border="0" cellspacing="0" cellpadding="0" class="w300" bgcolor="#a3a3a3"&gt;
                                  &lt;tr&gt;
                                      &lt;td width="15"&gt;&lt;/td&gt;
                                      &lt;td style="font-family:arial, Helvetica, sans-serif; font-size:16px; line-height:20px; color:#ffffff; text-align:center;"&gt;
                                      &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                                      &lt;tr&gt;
                                          &lt;td width="100%" height="10"&gt;&lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;/table&gt;
                                      &lt;a style="color:#FFFFFF; text-decoration:none;" href="#" target="_blank"&gt;Call to Action&lt;/a&gt;
                                      &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                                      &lt;tr&gt;
                                          &lt;td width="100%" height="10"&gt;&lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;/table&gt;
                                      &lt;/td&gt;
                                      &lt;td width="15"&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
                              &lt;tr&gt;
                              &lt;td width="100%" height="20"&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;/td&gt;
                          &lt;td width="20"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
  
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;/table&gt;    
  
  
  
  
                      &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
                  &lt;!--[if mso]&gt;
                      &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
                  &lt;![endif]--&gt;
                  &lt;!--[if IE]&gt;
                      &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
                  &lt;![endif]--&gt;
  
  
  
          &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
          &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  </code></pre>