열에 트리가있을 때 테이블의 크기가 조정됩니다.

Question

아래 테이블 높이를 각 열에 대한 비율로 고정하려고 시도하는 일부 코드를 게시하고 있습니다. 하나는 10 %, 다른 하나는 90 %.

현재 "treeOne"div 태그에서 자바 스크립트를 통해 dijit.Tree 위젯을 삽입하고 있습니다. 이 나무가 열리면 내 기둥이 넓어 져 수용 할 수 있습니다. 나는 그것이 무엇이든 상관없이 항상 10 % 넓이를 원하고 컬럼의 크기를 줄이기를 원합니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

<table width="100%" border="1"> 
     <thead> 
      <tr> 
      <td style="overflow:hidden;width:10%;"> Tree</td> 
       <td style="width:90%;" > Query</td>      
     </tr> 
     </thead> 
     <tbody> 
     <td style="overflow:hidden;width:10%;"> 
        <div id ="treeOne">Insert Tree here</div> 
     </td> 
     <td style="width:90%;"> 
    . 
    . 
    . 

Answer 1

표 셀은 내부에있는 모든 것을 수용하도록 확장됩니다.

당신이 (그 과정에서 내용을 잘라 등)의 크기가 고정하려면, 대신 된 div와 CSS를 사용해보십시오 :

<style type="text/css"> 
.col1 { 
    clear:both; 
    float:left; 
    overflow:hidden; 
    width:10%; 
} 
.col2 { 
    float:left; 
    width:90%; 
} 
</style> 

<div class="col1"> 
    <div id ="treeOne">Insert Tree here</div> 
</div> 
<div class="col2">...</div>