오버플로 div 내부에서 표 셀 폭 고정

Question

게시물 하단의 코드를 참조하십시오. div 안에 테이블이 있습니다. $size 변수가 2 또는 3과 같이 작고 모든 셀이 div 내부에 쉽게 들어갈 수있는 경우 <th> 셀의 너비가 올바르게 100px로 제어됩니다. $size 변수를 변경하면 $size = 20overflow:auto 속성이 있더라도 <th> 표가 div에 맞게 압축 된 것을 확인할 수 있습니다. overflow:scroll에 대해서도 똑같은 것을 볼 수 있습니다.

내가보고 싶은 것은 테이블 셀 너비가 100px에서 일정하게 유지되고 div가 모든 셀을 스크롤하기 위해 스크롤 막대를 도입한다는 것입니다. 나는 세포의 너비가 줄어들고 싶지 않다해도 $size == 1000.

width : 100px 테이블을 부모 div보다 더 크게 유지하려면 어떻게해야합니까? 그리고 나서 부모 div를 스크롤 가능하게하십시오. 이것에

<style type="text/CSS"> 

    .headrow { 
     border : 1px solid; 
     width : 100px; 
     height : 40px; 
    } 

table { 
    table-layout: fixed; 
} 

</style> 


<div id="b" style="border:1px solid;width:585px;height:60px;overflow:auto;"> 
    <table> 
     <tr> 
      <?php 
      $size = 20; 
       for ($i=0;$i<$size;$i++){ 
        echo '<th class="headrow"></th>'; 
       } 
      ?> 
     </tr> 
    </table> 
</div> 

Answer 1

업데이트하여 CSS :

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

See it in action.