限制最小尺寸到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