How to make a 2 column table responsive on desktop and phone.

[LogicRecruiters]

Please I would like to know how to make this two column table very responsive on phone. I want the second column to come under as a row when viwed on phone.

Here is the sample of what I made:
https://codepen.io/anon/pen/QqGNRB

Thanks for your assistance.

[Paulie_D]

Essentially , you can’t do that with a table natively with CSS…you’d be better off using a different layout method which can adapt like that.

Also, we don’t need your whole codebase in the Codepen…just the relevant code to demonstrate the issue.

You’re more likely to get assistance if we don’t have to wade through dozens of lines of unnecessary HTML & CSS.

Help us help you.

[JeroenR]

You can achieve this by adding this to your CSS for example:

@media (max-width: 500px) {
  td {
    display: block;
  }
}

But I’m not sure that the default behavior of the td can be overwritten in every browser. If not, you can do it the other way around, display DIV’s as table and table-cell’s when the view port is wider than a certain number of pixels.

[lenvin7]

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.

[Author]

Posts