html - 将最小大小限制为 html 表

Question

我有一个问题，我需要制作无限拉伸(stretch)尺寸的表格，但我需要为它们定义最小宽度以便我可以看到它们。当它们缩小到原始大小的 50% 时，它们将停止缩小浏览器窗口并滚动查看。我希望你明白了，这是我的 html 代码:

.vnutro {
  margin-left: 100px;
  margin-top: 20px;
  max-width: 90%;
  min-width: 50%;
}
th {
  border: 1px solid black;
  max-width: 100px;
  min-width: 60px;
}
.th1 {
  width: 25%;
}
.th2 {
  width: 65%;
}
.th3 {
  width: 2%;
}
.th4 {
  width: 2%;
}
td {
  border: 1px solid black;
  text-align: left;
}

<div class="vnutro" style="overflow-x:auto;">

  <a name="1072016">
    <!--tabulka 1-->
    <table>
      <tr>
        <th class="th1">nadpis1</th>
        <th class="th2">nadpis 2</th>
        <th class="th3">nadpis 3</th>
        <th class="th4">nadpis 4</th>
      </tr>
      <tr>
        <td>text1</td>
        <td>text2</td>
        <td>text3</td>
        <td>
          <form action="">
            <input type="checkbox" name="checkbox" value="box">
        </td>
      </tr>
    </table>

    <a name="1172016">
      <!--tabulka 2-->
      </br>

      <a name="1272016">
        <!--tabulka 3-->

</div>

Answer 1

此示例拉伸(stretch)至全宽，但最小宽度为 400 像素，列可以具有相同或不同的宽度。

Fiddle demo

table {
  min-width: 400px;
  width: 100%;
}
th {
  border: 1px solid black;
}
th {
  width: 25%;
}
td {
  border: 1px solid black;
  text-align: left;
  vertical-align: top;
}
/* table 2 */
[name="1172016"] ~ table th {
  width: 20%;
}
[name="1172016"] ~ table th:nth-child(1) {
  width: 40%;
}

<div class="vnutro" style="overflow-x:auto;">

  <a name="1072016"></a>
  <!--tabulka 1-->
  Table 1
  <table>
    <tr>
      <th>nadpis1</th>
      <th>nadpis 2</th>
      <th>nadpis 3</th>
      <th>nadpis 4</th>
    </tr>
    <tr>
      <td>text1</td>
      <td>text2</td>
      <td>text3</td>
      <td>
        <form action="">
          <input type="checkbox" name="checkbox" value="box">
        </form>
      </td>
    </tr>
  </table>

  <a name="1172016"></a>
  <!--tabulka 1-->
  <br>
  Table 2
  <table>
    <tr>
      <th>nadpis1</th>
      <th>nadpis 2</th>
      <th>nadpis 3</th>
      <th>nadpis 4</th>
    </tr>
    <tr>
      <td>text1</td>
      <td>text2</td>
      <td>text3</td>
      <td>
        <form action="">
          <input type="checkbox" name="checkbox" value="box">
        </form>
      </td>
    </tr>
  </table>

</div>