title: Make table responsive on mobile devices using HTML/CSS
body: <p>I have this table that is part of a larger email. When the user's device is a mobile phone, or small screen I want the table to go from 2 columns/2 rows, to 1 column 4 rows. Would like to use the least amount of code possible. </p>
  
  <pre><code>&lt;table style="width:100%;table-layout:fixed;border-collapse:separate !important;border-spacing:20px 40px; font-family:Helvetica, Arial, sans-serif; color:#333333; font-size:16px; line-height:24px; font-weight:100;" class="bodywrapcenter"&gt;
    &lt;tr&gt;
      &lt;td&gt;
        Dr. Andrew Borg&lt;br&gt;
        Chapter Advisor&lt;br&gt;
        aborg@example.edu&lt;br&gt;
      &lt;/td&gt;
      &lt;td&gt;
        Stuart J. Sigman, PhD&lt;br&gt;
        Dean, College of Arts and Sciences&lt;br&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;
        Dr. Dale Mancini&lt;br&gt;
        Chapter Advisor&lt;br&gt;
        dmancini@example.edu&lt;br&gt;
      &lt;/td&gt;
      &lt;td&gt;
        David DeHaven, PhD&lt;br&gt;
        Dean, Graduate School of Business and Management&lt;br&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>