title: Tables declared as inline-block refuse to stack on small screens
body: <p>I have two rows inside of a container table. Row 1, and Row 2.</p>
  <p>I have a simple two column layout, using tables, where each row has two columns.</p>
  <p>As an aside, the columns are implemented differently, and the media queries that would allow the columns in row 1 to stack have been removed.</p>
  <p>So, 2 rows each with two columns.</p>
  <p>Row 1 is my problem row. Row 2 is my stacking row.</p>
  <p>The columns on row 2 only, should stack on smaller screens.</p>
  <p>The tables in row 2 are declared as inline-block so they can sit next to each other.</p>
  <p>Under certain conditions, the tables in row 2 refuse to stack on narrower screens. I narrowed it down to the padding on two table data tags inside of Row 1, my problem row.</p>
  <p>When the two table data tags in the problem row have a combined padding of 27px or below, the nested tables in the stacking row (row 2) will stack on small screens (and specifically at a width of 604 pixels).</p>
  <p>However if I change the padding on the two table data tags to a combined padding of 28px or more, the tables in the stacking row will no longer stack on small screens.</p>
  <pre><code>&lt;body&gt;
      &lt;center style=&quot;width: 100%;&quot;&gt;
          &lt;div style=&quot;max-width: 650px;&quot;&gt;
              &lt;table style=&quot;width: 100%;&quot;&gt;
  &lt;!--Begin Problem Row--&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;table style=&quot;width: 100%;&quot;&gt;
                              &lt;tr&gt;
  &lt;!-- problem cell 1: 
                                
  When problem cell 1 and problem cell 2 have a combined padding of greater than or equal to 28px, the tables in my &quot;stacking row&quot; 
  refuse to stack. Otherwise, they stack fine. 
                                 
  --&gt;
                                  &lt;td style=&quot;padding: 13px; width: 50%&quot;&gt;
                                     &lt;table&gt;
                                         &lt;tr&gt;
                                             &lt;td style=&quot;text-align: center;&quot;&gt;
                                                  &lt;p&gt;Title&lt;/p&gt;
                                                  &lt;img src=&quot;https://via.placeholder.com/275x200&quot; alt=&quot;&quot; width=&quot;275&quot;&gt;
                                                  &lt;p&gt;Random Text&lt;/p&gt;
                                             &lt;/td&gt;
                                         &lt;/tr&gt;
                                     &lt;/table&gt;
                                  &lt;/td&gt;
  &lt;!-- problem cell 2: 
                                
  When problem cell 1 and problem cell 2 have a combined padding of greater than or equal to 28px, the tables in my &quot;stacking row&quot; 
  refuse to stack. Otherwise, they stack fine. 
                                 
  --&gt;
                                  &lt;td style=&quot;padding: 15px; width: 50%&quot;&gt;
                                     &lt;table&gt;
                                         &lt;tr&gt;
                                             &lt;td style=&quot;text-align: center;&quot;&gt;
                                                  &lt;p&gt;Title&lt;/p&gt;
                                                  &lt;img src=&quot;https://via.placeholder.com/275x200&quot; alt=&quot;&quot; width=&quot;275&quot;&gt;
                                                  &lt;p&gt;Random Text&lt;/p&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;!--Begin stacking row--&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                         &lt;table width=&quot;100%;&quot;&gt;
                             &lt;tr&gt;
                                 &lt;td style=&quot;text-align: center;&quot;&gt;
  &lt;!--These tables should stack --&gt;
                                      &lt;table style=&quot;display: inline-block; width: 100%; vertical-align: top; max-width: 300px;&quot;&gt;
                                          &lt;tr&gt;
                                              &lt;td&gt;
                                                  &lt;table &gt;
                                                      &lt;tr&gt;
                                                         &lt;td&gt;
                                                             &lt;img src=&quot;https://via.placeholder.com/275x200&quot; alt=&quot;&quot; width=&quot;275&quot;&gt;
                                                         &lt;/td&gt;
                                                     &lt;/tr&gt;
                                                     &lt;tr&gt;
                                                         &lt;td&gt;
                                                             &lt;p&gt;Title&lt;/p&gt;
                                                         &lt;/td&gt;
                                                     &lt;/tr&gt;
                                                     &lt;tr&gt;
                                                         &lt;td&gt;
                                                             &lt;p&gt;This is a description of a product that you can use to describe the products that you need to describe&lt;/p&gt;
                                                         &lt;/td&gt;
                                                     &lt;/tr&gt;
                                                 &lt;/table&gt;
                                             &lt;/td&gt;
                                          &lt;/tr&gt;
                                      &lt;/table&gt;
  &lt;!--These tables should stack --&gt;
                                      &lt;table style=&quot;display: inline-block; width: 100%; vertical-align: top; max-width: 300px;&quot;&gt;
                                          &lt;tr&gt;
                                              &lt;td&gt;
                                                  &lt;table &gt;
                                                      &lt;tr&gt;
                                                         &lt;td&gt;
                                                             &lt;img src=&quot;https://via.placeholder.com/275x200&quot; alt=&quot;&quot; width=&quot;275&quot;&gt;
                                                         &lt;/td&gt;
                                                     &lt;/tr&gt;
                                                     &lt;tr&gt;
                                                         &lt;td&gt;
                                                             &lt;p&gt;Title&lt;/p&gt;
                                                         &lt;/td&gt;
                                                     &lt;/tr&gt;
                                                     &lt;tr&gt;
                                                         &lt;td&gt;
                                                             &lt;p&gt;This is a description of a product that you can use to describe the products that you need to describe&lt;/p&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;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/center&gt;
  &lt;/body&gt;
  </code></pre>
  <p>In my internal stylesheet, the padding on all td's is set to 0 and the border spacing on all tables is set to 0.</p>
  <p>I've included my entire stylesheet since it's fairly small.</p>
  <pre><code>       
  
  /* General Resets      
          The following resets will eliminate all default margin, padding and border for all 
          clients. The capital M in Margin on the body reset is recommended for Outlook. Also, we will give 
          the area outside our email frame a neutral background color.      
  */
  
          
          body, .body {
              Margin: 0;
              padding: 0;
              background-color: #f6f9fc;
          }
          .backHover:hover{
              background-color: #ffffff !important;
          }
          table {
              border-spacing: 0;
              background-color: black;
          }
          .centering {
              width: 100%;
              table-layout: fixed;
              background-color: #f6f9fc;
              padding-bottom: 40px;
          }
          
          td {
              padding: 0;
              background-color: aqua;
          }
          img {
              border: 0;
          }
          p {
  
              margin: 0;
          }
          a {
              text-decoration: none;
          }
  
          
          table, td, div, h1, p {font-family: Arial, sans-serif;}
      &lt;/style&gt;
  </code></pre>
  <p>I don't know why this behavior is happening.</p>