title: Is it possible to use display:block on td in HTML email, to achieve responsive table design?
body: <p>This fantastic article describes how to create responsive tables which scale fabulously to mobile browsers.</p>
  
  <p>Now I'm trying to apply the same technique to html emails but <code>display:block</code> just won't seem to work in html emails.</p>
  
  <p><strong>To reproduce the issue:</strong></p>
  
  <ol>
  <li><p>Save the following code as an HTML page:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;style type="text/css"&gt;
          @media only screen and (max-width: 760px), screen and (max-device-width: 480px)  {
              /* Force table to not be like tables anymore */
              table, td, tbody, tr{
                      display: block;
                      width:100%;
                      padding:0;
                      clear:both;
              }
              td {
                      /* Behave  like a "row" */
                      position: relative !important;
              }
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;table style="width:100%;"&gt;
          &lt;tr&gt;
              &lt;td style="border:1px solid red;"&gt;1/1&lt;/td&gt;
              &lt;td style="border:1px solid red;"&gt;1/2&lt;/td&gt;
              &lt;td style="border:1px solid red;"&gt;1/3&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td style="border:1px solid red;"&gt;2/1&lt;/td&gt;
              &lt;td style="border:1px solid red;"&gt;2/2&lt;/td&gt;
              &lt;td style="border:1px solid red;"&gt;2/3&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre></li>
  <li><p>Open the page in Safari</p></li>
  <li><p>Resize the window to note how the table changes with a smaller window-size</p></li>
  <li><p>Press <kbd>CMD</kbd>+<kbd>i</kbd> or <code>File-&gt;Mail</code> Contents of this page to create a HTML email</p></li>
  <li><p>Resize the email window to note how the table still resizes correctly</p></li>
  <li><p>Send the email to yourself and open it.</p></li>
  <li><p>Now notice how the email indeed responds to the media query but unsuccessfully restyles the table.</p></li>
  </ol>
  
  <p>I have yet to find an email client that actually displays the table correctly. Is this a dead-end or do you have ideas of workarounds?</p>