title: How to make HTML table responsive for email template when using an external CSS file is not a possibility
body: <p>I created an email template that uses a two-column layout. This was my approach:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
        &lt;td colspan="2" align="center"&gt;
            &lt;h1&gt;Header of my email template&lt;/h1&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;img src="image1.jpg" alt="Image 1" /&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;img src="image2.jpg" alt="Image 2" /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td colspan="2" align="center"&gt;
            &lt;p&gt;Footer of my email template&lt;/p&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>It works great on desktop! I have a two-column layout exactly as I wanted it. The problem is on phones because screens are too small for a two-column layout. I need one picture per row, not two, for mobile devices. What I could do is to use <code>float:left;width:100%</code> for the <code>&lt;td&gt;</code> elements that contain the images so that I have the one column layout that I need. However, that <code>float:left;width:100%</code> should apply only when <code>@media screen and (max-width:450px)</code> for example. But there is no way to use <code>@media screen and (max-width:450px)</code> using inline CSS. Remember, this is for an email template. So I cannot invoke external CSS files or add CSS to the <code>&lt;head&gt;</code> of the page because this is code that will be sent for an email template.</p>
  
  <p>I found at <a href="https://kb.benchmarkemail.com/using-css-in-html-emails/" rel="nofollow noreferrer">https://kb.benchmarkemail.com/using-css-in-html-emails/</a> this advice, but that is not a solution for responsive tables:</p>
  
  <blockquote>
    <p>Things To Do</p>
    
    <p>Use tables for layout. Tables are more consistently supported. We
    recommend that you place your CSS code inline to your content. It
    should look something like this: Your content
    here.... Declare width, cellpadding, and cellspacing for all
    tables and table cells. This will result in a fixed width for the
    template. Use hspace and vspace tag attributes to add whitespace
    around an image. Margin and padding inline styles are supported by
    most, but not all email clients</p>
  </blockquote>
  
  <p>Any ideas? Thank you.</p>