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