如何让我的表格在移动视图中垂直对齐？

Question

我有 tables，它们在分辨率为 1920 和 1280 的桌面视图中并排水平对齐，当我将屏幕分辨率更改为移动版本时，tables 变得混乱并且相互重叠，我希望它垂直对齐，例如。 1 table on 每行居中对齐。那怎么办？我已经把水平对齐的代码放在桌面版了。

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

如何让我的表格在移动视图中垂直对齐？

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

javascript

css

jquery

html-table

media-queries