1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Responsive Table - How to get table to stack on mobile view

Discussion in 'HTML & Website Design' started by imaginexhacked, Apr 19, 2017.

  1. #1
    Hi,

    I am trying to make a responsive table. I have coded the table and it looks like what I want pretty much on the desktop and tablet view - https://bankruptcycanada.com/table-header/

    However, when it shrinks down further to the mobile view the second column of the table is hidden and a scrolling bar appears. How can I make the second column drop below the first and stack on top of each other instead of having a vertical scrollbar on the phone?

    My html is:

    <div class="table-2">
    <table>
    <thead>
    <tr>
    <th style="text-align: center; width:50%">Find a Trustee by Province</th>
    <th style="text-align: center; width:50%">Find a Trustee by Postal Code</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td width="50%">
    <form>
    <p style="text-align: center;"><select class="tabledropdown" name="Jump" size="1" onchange="window.open(this.options&#091;this.selectedIndex&#093;.value,'_top')"><option value=""> Choose Your Province </option><option value="bankruptcy-alberta">Alberta </option><option value="bankruptcy-bc">BC </option><option value="bankruptcy-manitoba">Manitoba </option><option value="bankruptcy-new-brunswick">New Brunswick </option><option value="bankruptcy-newfoundland">Newfoundland </option><option value="bankruptcy-nova-scotia">Nova Scotia </option><option value="bankruptcy-nunavut">Nunavut </option><option value="bankruptcy-northwest-territories">NWT</option><option value="bankruptcy-ontario">Ontario</option><option value="bankruptcy-pei">PEI</option><option value="bankruptcy-quebec">Quebec</option><option value="bankruptcy-saskatchewan">Saskatchewan</option><option value="bankruptcy-yukon">Yukon</option></select></p>
    </form>
    </td>
    <td width="50%"><a href="/find-a-local-insolvency-trustee/"><strong>Find the Closest Trustee Office by a Postal Code Search</strong></a></td>
    </tr>
    </tbody>
    </table>
    </div>
    SEMrush
    My CSS is:

    .table-2 {width:75%;margin-left:auto;margin-right:auto;}
    .table-2 table thead {background-color:#F60;}
    .table-2 td {width:50%;}
    /* Smartphones (portrait) ----------- */
    @media only screen and (max-width : 767px) {
    .table-2 {width:75%;margin-left:auto;margin-right:auto;}
    .table-2 table thead {background-color:#F60;}
    .table-2 td {width:50%;}
    }
     
    imaginexhacked, Apr 19, 2017 IP
    SEMrush
  2. Rokis

    Rokis Member

    Messages:
    60
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    45
    #2
    I would probably set a display:none on this table and just create a one for mobile only and have it pop up using a media query. Tables are pain in the ash to create because of how limited they are when you need them to be responsive...
     
    Rokis, Apr 19, 2017 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    724
    Best Answers:
    152
    Trophy Points:
    470
    #3
    Tables are, per definition, not responsive - you can modify sizes, and use icons instead of text on smaller screens, and so on, but moving cells around breaks the semantic flow of the table, and isn't recommended. As @Rokis said, the better solution would normally be to create a secondary method of showing the data for smaller screens, or live with the scrollbar. Scrollbars are generally quite common on larger tables on smaller screens, and shouldn't be a thing that user's balk at.
     
    PoPSiCLe, Apr 20, 2017 IP