How to change my table based on screen size?

Question

I want to change my table so it would look nice on a mobile platform. All I want to do is change my table so it is two columns. I am using this code to send an email. So I cannot link a stylesheet to my html. It is recommended that I use inline styles. Is it possible to accomplish this using javascript?

Here is what I tried:

<script>
    $(document).ready(function() {
    if ($(window).width() < 1024) {
        <table align="center">
            <tr>
                <td style="vertical-align: top;">Property:</td>
                <td style="padding-left: 10px; font-weight: bold; width: 300px;">115 EAST 9TH STREET<br>NEW YORK, NY, 10003</td>
            </tr>
            <tr>
                <td style="vertical-align: top;">Resident Name:</td>
                <td style="padding-left: 10px; font-weight: bold; width: 300px; vertical-align: top;">MAILBOXES ETC.</td>
            </tr>
            <tr>
                <td style="">Unit:</td>
                <td style="padding-left: 10px; font-weight: bold;">STORE</td>
            </tr>
            <tr>
                <td style="">Account #:</td>
                <td style="padding-left: 10px; font-weight: bold;">xxx-xxx</td>
            </tr>
        </table>
    } else {
        <table align="center">
            <tr>
                <td style="vertical-align: top;">Resident Name:</td>
                <td style="padding-left: 10px; font-weight: bold; width: 300px; vertical-align: top;">MAILBOXES ETC.</td>
                <td style="vertical-align: top;">Property:</td>
                <td style="padding-left: 10px; font-weight: bold; width: 300px;">115 EAST 9TH STREET<br>NEW YORK, NY, 10003</td>
             </tr>
             <tr>
                  <td style="">Unit:</td>
                  <td style="padding-left: 10px; font-weight: bold;">STORE</td>
             </tr>
             <tr>
                 <td style="">Account #:</td>
                 <td style="padding-left: 10px; font-weight: bold;">xxx-xxx</td>
             </tr>
         </table>
       }});
 </script>

Any help will be greatly appreciated.

Answer 1

No, definitely don't use Javascript for email sending, as most clients fully disable it.

You wouldn't need Javascript at all even if you were designing your table for web browsers only. All your problems can be solved with well applied media queries , if you wanna spend a little time doing further readings on that topic. No doubt it's worth it.

For emails, I recommend reading this awesome article about using media queries for emails . One huge downside of this is the lack of support by Gmail (which the author states in the end of the text). If covering Gmail users is a must, you'll have to stick with the most basic responsive practices as long as I'm aware, such as using em and/or % units for width , height , padding , margin etc instead of px in your CSS styles.