Make table responsive on mobile devices using HTML/CSS

Issue

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.

<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">
  <tr>
    <td>
      Dr. Andrew Borg<br>
      Chapter Advisor<br>
      aborg@example.edu<br>
    </td>
    <td>
      Stuart J. Sigman, PhD<br>
      Dean, College of Arts and Sciences<br>
    </td>
  </tr>
  <tr>
    <td>
      Dr. Dale Mancini<br>
      Chapter Advisor<br>
      dmancini@example.edu<br>
    </td>
    <td>
      David DeHaven, PhD<br>
      Dean, Graduate School of Business and Management<br>
    </td>
  </tr>
</table>

Solution

Try using Bootstrap for responsive tables.

The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768 px). When viewing on anything larger than 768 px wide.

Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

Answered By - Arcot Deepika