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.

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #260446
    LogicRecruiters
    Participant

    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.

    #260448
    Paulie_D
    Moderator

    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.

    #260468
    JeroenR
    Participant

    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.

    #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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design’ is closed to new topics and replies.