title: Breaking table contents on responsive email
body: <p>I'm coding a responsive email, and I'm running onto some troubles with the behavior of some its tables. Please check the attached picture, for the desired effect.</p>
  
  <p><a href="https://dl.dropboxusercontent.com/u/58655025/mail_scenario.jpg" rel="nofollow">https://dl.dropboxusercontent.com/u/58655025/mail_scenario.jpg</a>
  (left: "normal" behavior; right: responsive behavior, when the view width is &lt;= 320px)</p>
  
  <p>I'm not exactly sure of how many elements these blocks (both rectangular and the square ones; number of block elements and contents are dynamic) will have in total, so I want to keep the HTML as dynamic as possible. So, every time a new element is added to each block, it's placed at the right of the previous one and when they cannot fit on that line (due to email's max-width of 620px), I'd like for them to continue below.
  And that's the part I'm not able to do. Instead of breaking below, the elements keep growing in the same line, ignoring the email's max-width property.</p>
  
  <p>I'd like for the implementation to be table-based only, in order to guarantee the maximum email-client support as possible.</p>
  
  <p>What can I do to achieve this? Any other suggestion?</p>
  
  <p>Please, check this fiddle for a live example: <a href="http://jsfiddle.net/afe33fhv/" rel="nofollow">http://jsfiddle.net/afe33fhv/</a></p>
  
  <p>Or the HTML code, as required:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
          &lt;title&gt;Title&lt;/title&gt;
          &lt;style type="text/css"&gt;
              /* Client-specific Styles */
              #outlook a {padding:0;}
              body {width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; color:#756d85; font-family:Helvetica, Arial, sans-serif;}
              body.outlook img { width: auto !important; max-width: none !important;}
              .ExternalClass {width:100%;}
              .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}
              .backgroundTable {margin:0; padding:0; width:100% !important; line-height:100% !important;}
              img {outline:none; text-decoration:none; border:none; -ms-interpolation-mode:bicubic;}
              a img {border:none;}
              .image_fix {display:block;}
              p {margin: 0px 0px !important;}
              table td {border-collapse: collapse;}
              table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
              a {color: #756d85;text-decoration: none;text-decoration:none!important;}
              table[class=full] { width: 100%; clear:both; }
  
              /*IPAD STYLES*/
              @media only screen and (max-width: 640px) {
                  a[href^="tel"], a[href^="sms"] {
                      text-decoration: none;
                      color: #000;
                      pointer-events: none;
                      cursor: default;
                  }
                  table[class=devicewidth] {width:440px !important; text-align:center !important;}
                  table[class=devicewidthinner] {width:420px !important; text-align:center !important;}
                  table[class=devicewidthsocial] {width:200px! important; text-align:center !important;}
                  img[class=banner] {width:440px !important; height:220px !important;}
                  img[class=colimg2] {width:440px !important; height:220px !important;}
              }
  
              /*IPHONE STYLES*/
              @media only screen and (max-width: 480px) {
                  a[href^="tel"], a[href^="sms"] {
                      text-decoration: none;
                      color: #000;
                      pointer-events: none;
                      cursor: default;
                  }
                  table[class=devicewidth] {width:300px !important; text-align:center !important;}
                  table[class=devicewidthinner] {width:260px !important; text-align:center !important;}
                  table[class=devicewidthsocial] {width: 200px!important; text-align:center !important;}
                  img[class=banner] {width: 280px!important; height:140px!important;}
                  img[class=colimg2] {width: 280px!important; height:140px!important;}
                  td[class=mobile-hide]{display:none !important;}
              }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0"&gt;
          &lt;center&gt;
  
              &lt;!-- | Horizontal blocks | --&gt;
              &lt;table width="100%" cellpadding="0" cellspacing="0" border="0" class="backgroundTable"&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;table width="620" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" bgcolor="#f2f2f2"&gt;
                                  &lt;tbody&gt;
                                      &lt;tr&gt;
                                          &lt;!-- Element 1 --&gt;
                                          &lt;td&gt;
                                              &lt;table width="300" height="100" cellpadding="0" cellspacing="0" border="0" align="center"&gt;
                                                  &lt;tbody&gt;
                                                      &lt;tr&gt;
                                                          &lt;td&gt;
                                                              &lt;table width="300" height="80" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#7c84ca"&gt;
                                                                  &lt;tbody&gt;
                                                                      &lt;tr&gt;&lt;td width="100%"&gt;1&lt;/td&gt;&lt;/tr&gt;
                                                                  &lt;/tbody&gt;
                                                              &lt;/table&gt;
                                                          &lt;/td&gt;
                                                      &lt;/tr&gt;
                                                      &lt;tr&gt;&lt;td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
                                                  &lt;/tbody&gt;
                                              &lt;/table&gt;
                                          &lt;/td&gt;
  
                                          &lt;!-- Element 2 --&gt;
                                          &lt;td&gt;
                                              &lt;table width="300" height="100" cellpadding="0" cellspacing="0" border="0" align="center"&gt;
                                                  &lt;tbody&gt;
                                                      &lt;tr&gt;
                                                          &lt;td&gt;
                                                              &lt;table width="300" height="80" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#bdaabf"&gt;
                                                                  &lt;tbody&gt;
                                                                      &lt;tr&gt;&lt;td width="100%"&gt;2&lt;/td&gt;&lt;/tr&gt;
                                                                  &lt;/tbody&gt;
                                                              &lt;/table&gt;
                                                          &lt;/td&gt;
                                                      &lt;/tr&gt;
                                                      &lt;tr&gt;&lt;td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
                                                  &lt;/tbody&gt;
                                              &lt;/table&gt;
                                          &lt;/td&gt;
  
                                          &lt;!-- Element 3 --&gt;
                                          &lt;td&gt;
                                              &lt;table width="300" height="100" cellpadding="0" cellspacing="0" border="0" align="center"&gt;
                                                  &lt;tbody&gt;
                                                      &lt;tr&gt;
                                                          &lt;td&gt;
                                                              &lt;table width="300" height="80" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#d26ec1"&gt;
                                                                  &lt;tbody&gt;
                                                                      &lt;tr&gt;&lt;td width="100%"&gt;3&lt;/td&gt;&lt;/tr&gt;
                                                                  &lt;/tbody&gt;
                                                              &lt;/table&gt;
                                                          &lt;/td&gt;
                                                      &lt;/tr&gt;
                                                      &lt;tr&gt;&lt;td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
                                                  &lt;/tbody&gt;
                                              &lt;/table&gt;
                                          &lt;/td&gt;
  
                                          &lt;!-- Element 4 --&gt;
                                          &lt;td&gt;
                                              &lt;table width="300" height="100" cellpadding="0" cellspacing="0" border="0" align="center"&gt;
                                                  &lt;tbody&gt;
                                                      &lt;tr&gt;
                                                          &lt;td&gt;
                                                              &lt;table width="300" height="80" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#d85c79"&gt;
                                                                  &lt;tbody&gt;
                                                                      &lt;tr&gt;&lt;td width="100%"&gt;4&lt;/td&gt;&lt;/tr&gt;
                                                                  &lt;/tbody&gt;
                                                              &lt;/table&gt;
                                                          &lt;/td&gt;
                                                      &lt;/tr&gt;
                                                      &lt;tr&gt;&lt;td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
                                                  &lt;/tbody&gt;
                                              &lt;/table&gt;
                                          &lt;/td&gt;
  
                                      &lt;/tr&gt;
                                  &lt;/tbody&gt;
                              &lt;/table&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
  
              &lt;!-- | Square blocks | --&gt;
              &lt;table width="100%" cellpadding="0" cellspacing="0" border="0" class="backgroundTable"&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;table width="620" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" bgcolor="#f2f2f2"&gt;
                                  &lt;tbody&gt;
                                      &lt;tr&gt;
                                          &lt;!-- Element 1 --&gt;
                                          &lt;td&gt;
                                              &lt;table width="140" height="140" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#8eb7c2"&gt;
                                                  &lt;tbody&gt;
                                                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;
                                                  &lt;/tbody&gt;
                                              &lt;/table&gt;
                                          &lt;/td&gt;
  
                                          &lt;!-- Element 2 --&gt;
                                          &lt;td&gt;
                                              &lt;table width="140" height="140" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#8ec296"&gt;
                                                  &lt;tbody&gt;
                                                      &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt;
                                                  &lt;/tbody&gt;
                                              &lt;/table&gt;
                                          &lt;/td&gt;
  
                                          &lt;!-- Element 3 --&gt;
                                          &lt;td&gt;
                                              &lt;table width="140" height="140" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#636a34"&gt;
                                                  &lt;tbody&gt;
                                                      &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;
                                                  &lt;/tbody&gt;
                                              &lt;/table&gt;
                                          &lt;/td&gt;
  
                                          &lt;!-- Element 4 --&gt;
                                          &lt;td&gt;
                                              &lt;table width="140" height="140" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#c17b01"&gt;
                                                  &lt;tbody&gt;
                                                      &lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;/tr&gt;
                                                  &lt;/tbody&gt;
                                              &lt;/table&gt;
                                          &lt;/td&gt;
  
                                      &lt;/tr&gt;
                                  &lt;/tbody&gt;
                              &lt;/table&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/center&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>