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

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>

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%;}
}

 

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

 

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.