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