我有一个问题，我需要使表具有不受限制的拉伸大小，但我需要为其定义最小宽度，这样我才能看到它们。当它们缩小到原始大小的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>该示例拉伸到全宽，但最小宽度为400px，列的宽度可以相同或不同。
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句