Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design How to make a 2 column table responsive on desktop and phone. Reply To: How to make a 2 column table responsive on desktop and phone.

#260544
lenvin7
Participant

The first method uses the same column structure covered in the HTML section’s Column Layouts page. Here’s that code

<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <tr>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent">
                        <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="leftColumnContent">
                        <h1>Left Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">
                        <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="rightColumnContent">
                        <h1>Right Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

The default styling for the columns isn’t really a concern here, so let’s skip straight to the media query styles:


<style type="text/css"> @media only screen and (max-width: 480px){ #templateColumns{ width:100% !important; } .templateColumnContainer{ display:block !important; width:100% !important; } .columnImage{ height:auto !important; max-width:480px !important; width:100% !important; } .leftColumnContent{ font-size:16px !important; line-height:125% !important; } .rightColumnContent{ font-size:16px !important; line-height:125% !important; } } </style>

Hope this is helpful.