如何使我的表格在移動視圖中垂直對齊？

Question

對於分辨率 1920 和 1280，我有在桌面視圖上並排水平對齊的表格，當我將屏幕分辨率更改為移動版本時，表格變得雜亂並相互重疊，我希望它垂直對齊，例如。 每行中心對齊的 1 個表格。 怎么可能呢？ 我已將水平對齊的代碼放在桌面版本中。

 @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

您已經在使用帶有media queries的有效解決方案。 為小於或等於600px的屏幕添加此項。

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

不要忘記添加它以啟用media queries ：

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

完整示例代碼：

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