How can I make my tables vertically aligned in mobile view?

Question

I have tables which are horizontally aligned side by side on desktop view for both the resolution 1920 and 1280, when i change the screen resolution to Mobile version the tables get cluttered and overlap on each other, I want it to be vertically aligned eg. 1 table on on every row centre aligned. How can that be done? I have put the code for horizontal aligned in desktop version.

 @media screen and (min-width: 1000px) {.table-container { float: left; width: 15%; }.table-container:first-of-type { width: 40%; } }.table_container { float: left; width: 25%; }.container::after { content: ""; clear: both; display: table; } table { margin: 0 auto; border-radius: 10px; } tr { padding: 15px; text-align: center; } td { color: black; text-align: center; vertical-align: middle; border: 1px double white; height: 50px; background-color: grey; width: 272px; }.sub_text { font-size: 12px; font-style: italic; color: #0071ce; font-weight: 100; } th { background-color: black; text-align: center; padding: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; color: white; font-weight: bold; height: 70px; }.header { color: #0071ce; font-weight: bold; padding: 10px; }.wrapper { text-align: center; margin-top: 20px; } table tr:last-child td:first-child { border-bottom-left-radius: 10px; } table tr:last-child td:last-child { border-bottom-right-radius: 10px }

 <div class="table_container"> <table> <thead> <tr> <th colspan="2">Cost</th> </tr> <tr> </thead> <td class="header" rowspan="4">Your cost per biweekly paycheck<br> <span class="sub_text">Tobacco-free rates shown</span> </td> <td> emp Only</td> <tr> <td> emp + Spouse/partner</td> </tr> <tr> <td> emp + child(ren)</td> </tr> <tr> <td> emp + family</td> </tr> </tr> <tr> <td class="header" rowspan="2"> Org's annual max contribution<br> <span class="sub_text"> </span> </td> <td> emp Only</td> <tr> <td> emp + dependent(s)</td> </tr> </tr> <tr> <td class="header" rowspan="2">Annua deductible<br> <span class="sub_text">in-network care</span> </td> <td> emp Only</td> <tr> <td> emp + dependent(s)</td> </tr> </tr> </table> </div> <div class="table_container"> <table id="table2" class="checkboxdiv"> <tr> <th>Tab B<input type="checkbox" id="2" name="table2" value="table2"></th> </tr> <tr> <td>A</td> </tr> <tr> <td>B</td> </tr> <tr> <td>C</td> </tr> <tr> <td>D</td> </tr> <tr> <td>E</td> </tr> <tr> <td>F</td> </tr> <tr> <td>G</td> </tr> <tr> <td>H</td> </tr> </table> </div> <div class="table_container"> <table id="table2" class="checkboxdiv"> <tr> <th>Tab B<input type="checkbox" id="2" name="table2" value="table2"></th> </tr> <tr> <td>A</td> </tr> <tr> <td>B</td> </tr> <tr> <td>C</td> </tr> <tr> <td>D</td> </tr> <tr> <td>E</td> </tr> <tr> <td>F</td> </tr> <tr> <td>G</td> </tr> <tr> <td>H</td> </tr> </table> </div> <div class="table_container"> <table id="table2" class="checkboxdiv"> <tr> <th>Tab B<input type="checkbox" id="2" name="table2" value="table2"></th> </tr> <tr> <td>A</td> </tr> <tr> <td>B</td> </tr> <tr> <td>C</td> </tr> <tr> <td>D</td> </tr> <tr> <td>E</td> </tr> <tr> <td>F</td> </tr> <tr> <td>G</td> </tr> <tr> <td>H</td> </tr> </table> </div>

Answer 1

You're already using a valid solution with media queries . Add this for screens less than or equal to 600px .

@media screen and (max-width: 600px) {
  .tables {
    display: flex;
    flex-direction: column;
  }
  .table_container {
    width: 100%;
  }
}

Don't forget to add this to enable media queries :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Full sample code:

 @media screen and (min-width: 1000px) {.table-container { float: left; width: 15%; }.table-container:first-of-type { width: 40%; } }.table_container { float: left; width: 25%; }.container::after { content: ""; clear: both; display: table; } table { margin: 0 auto; border-radius: 10px; } tr { padding: 15px; text-align: center; } td { color: black; text-align: center; vertical-align: middle; border: 1px double white; height: 50px; background-color: grey; width: 272px; }.sub_text { font-size: 12px; font-style: italic; color: #0071ce; font-weight: 100; } th { background-color: black; text-align: center; padding: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; color: white; font-weight: bold; height: 70px; }.header { color: #0071ce; font-weight: bold; padding: 10px; }.wrapper { text-align: center; margin-top: 20px; } table tr:last-child td:first-child { border-bottom-left-radius: 10px; } table tr:last-child td:last-child { border-bottom-right-radius: 10px } @media screen and (max-width: 600px) {.tables { display: flex; flex-direction: column; }.table_container { width: 100%; } }

 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <div class="tables"> <div class="table_container"> <table> <thead> <tr> <th colspan="2">Cost</th> </tr> <tr> </thead> <td class="header" rowspan="4">Your cost per biweekly paycheck<br> <span class="sub_text">Tobacco-free rates shown</span> </td> <td> emp Only</td> <tr> <td> emp + Spouse/partner</td> </tr> <tr> <td> emp + child(ren)</td> </tr> <tr> <td> emp + family</td> </tr> </tr> <tr> <td class="header" rowspan="2"> Org's annual max contribution<br> <span class="sub_text"> </span> </td> <td> emp Only</td> <tr> <td> emp + dependent(s)</td> </tr> </tr> <tr> <td class="header" rowspan="2">Annua deductible<br> <span class="sub_text">in-network care</span> </td> <td> emp Only</td> <tr> <td> emp + dependent(s)</td> </tr> </tr> </table> </div> <div class="table_container"> <table id="table2" class="checkboxdiv"> <tr> <th>Tab B<input type="checkbox" id="2" name="table2" value="table2"></th> </tr> <tr> <td>A</td> </tr> <tr> <td>B</td> </tr> <tr> <td>C</td> </tr> <tr> <td>D</td> </tr> <tr> <td>E</td> </tr> <tr> <td>F</td> </tr> <tr> <td>G</td> </tr> <tr> <td>H</td> </tr> </table> </div> <div class="table_container"> <table id="table2" class="checkboxdiv"> <tr> <th>Tab B<input type="checkbox" id="2" name="table2" value="table2"></th> </tr> <tr> <td>A</td> </tr> <tr> <td>B</td> </tr> <tr> <td>C</td> </tr> <tr> <td>D</td> </tr> <tr> <td>E</td> </tr> <tr> <td>F</td> </tr> <tr> <td>G</td> </tr> <tr> <td>H</td> </tr> </table> </div> <div class="table_container"> <table id="table2" class="checkboxdiv"> <tr> <th>Tab B<input type="checkbox" id="2" name="table2" value="table2"></th> </tr> <tr> <td>A</td> </tr> <tr> <td>B</td> </tr> <tr> <td>C</td> </tr> <tr> <td>D</td> </tr> <tr> <td>E</td> </tr> <tr> <td>F</td> </tr> <tr> <td>G</td> </tr> <tr> <td>H</td> </tr> </table> </div> </div>