title: How can I get a <td> to go from inline to block within an email template
body: <p>On the desktop email clients, I want my <strong>td</strong> elements to show up side by side.  Which they do, that's originally what a <strong>td</strong> is built to do.</p>
  
  <pre><code>&lt;table&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        // These sit side by side in the email client on Desktop
        &lt;td width="300"&gt;
          content
        &lt;/td&gt;
        &lt;td width="300"&gt;
          content
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>However, on the mobile view. </p>
  
  <p>Using a Media Query. I want to take these and make them full width/block, one on top of the other when the screen width hits 600px. But this doesn't seem to be working.  I've tried a fair variety of things.  Making these <strong>table</strong>'s instead of <strong>td</strong>'s was one way that worked.  </p>
  
  <p>However it wouldn't work in Outlook and a variety of other clients.</p>
  
  <pre><code>&lt;table&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        // These sit side by side in most email clients on Desktop (not Outlook), and stack on mobile.
        &lt;table&gt;
          content
        &lt;/table&gt;
        &lt;table&gt;
          content
        &lt;/table&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>My Second approach was using <strong>tr</strong>'s and setting their display to table-cell.  This also worked, but only a select few clients.</p>
  
  <pre><code>&lt;table&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        // These sit side by side in most email clients on Desktop (not Outlook), and stack on mobile.
        &lt;tr class="display: cell"&gt;
          content
        &lt;/tr&gt;
        &lt;tr class="display: cell"&gt;
          content
        &lt;/tr&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Does anyone know a good way to do this?</p>