限制最小尺寸到html表

Question

我有一个问题，我需要使表的无限伸展尺寸，但我需要为它们定义最小宽度，所以我可以看到它们。当它们缩小到原始大小的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

该样品拉伸到全宽度，但具有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>

Answer 2

如果我正确理解你的问题，然后尝试添加以下你的CSS，看看是否给你想要的结果。

table { 
    width: 100%; 
    table-layout: fixed; 
} 

更多信息here。

Answer 3

首先，在你提到的链接。你的代码有太多的错误。所以我解决它。

注意：根据您的需要调整宽度。

下面是更新后的代码：

<div class="vnutro" style="overflow-x:auto;"> 
    <a name="1072016"> 
    <!--tabulka 1--> 
    <table border="1" cellspacing="0" cellpadding="0" border="0" width="500"> 
     <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> 
      <td width="100"> text1 </td> 
      <td width="100"> text2 </td> 
      <td width="100"> text3 </td> 
      <td width="100"> 
       <form action=""> 
        <input type="checkbox" name="checkbox" value="box"> 
       </form> 
      </td> 
    </table> 
    </a> 
    <a name="1172016"></a> 
    <!--tabulka 2--> 
    <br/> 
    <a name="1272016"></a> 
    <!--tabulka 3--> 
</div> 

这里是fiddle活生生的例子。

Answer 4

这是我的整个代码，如果它可以帮助你。 HTML：https://paste.ee/p/kkFTh CSS：https://paste.ee/p/UlbZz