2015-02-04 3 views
0

div 내에서 크기가 조정 가능한 테이블을 가지고 있습니다. div 크기를 조정할 때 표의 너비가 조정되는 곳에서 표의 높이를 조정할 수 없습니다. 다음은 내 스 니펫입니다. 한번 확인해주십시오.div 크기 조정시 div 크기 조정 안 됨 테이블

<div id="id" style="height:350px; width250px;" class="control"> 

    <div id="fifth_heading" class="heading_control"> 
     <i class="fa2 fa-fifth"></i> 
     <p><%=entry1.getDivdescription() %></p> 
     <div class="button_right_second"> 
      <i class="fa3 fa-second3" id="<%=entry1.getDivid() %>"></i>    
     </div> 
    </div> 

    <div class="fifth_dropdown"> 
     <div class="table_data" id="table_second"> 

     <table id="example3" style="height:auto;"class="display" border="0" cellspacing="0" cellpadding="0"> 
     <!-- the below tr prints the dates --> 
     <tbody> 
      <tr id="line1"> 
      <td> 
       <span id="header_title">Your Current Lead Time</span>    
      </td> 
      </tr> 
      <tr id="line2"> 
      <td> 
       <span id="value">alignvalue</span> 
      </td> 
      </tr> 
     </tbody> 
     </table> 

     </div> 
    </div> 
</div> 



div.table_data{margin-left:2px;margin-right:10px;margin-top:5px;overflow:auto;} 
#table_second::-webkit-scrollbar{ 
width:10px; 
background-color:#cccccc; 
} 
#table_second::-webkit-scrollbar-thumb{ 
background-color:rgb(78, 82, 93); 
border-radius:10px; 
} 
#table_second::-webkit-scrollbar-thumb:hover{ 
background-color:rgb(78, 82, 93); 
border:1px solid #333333; 
} 
#table_second::-webkit-scrollbar-thumb:active{ 
background-color:rgb(78, 82, 93); 
border:1px solid #333333; 
} 
+0

테이블의 높이가 이미 '100 %'로 설정되어 있고 작동하지 않는 경우'.fifth_dropdown','.table_data' 또는'# table_second'에 사용 된 CSS 속성은 무엇입니까? CSS 스크립트를 게시물에 포함시킬 수 있습니까? – Mai

+0

에 대한 제 5_dropdown, 내가 추가 한, 그리고 table_data, 난 pasted.and # table_second에 대한, 나는 scrollers.please에 대한 CSS를 한 번만 그들을 추가했습니다. – micheal

답변

0

표의 높이를 100 %로 설정하고 명시 적으로 div의 높이를 설정하십시오. 이 게시물 당

답변 : 크기를 조정할 수 있지만이 ...

당신이 당신의 <table> 크기를 조정할 수 있도록하는 <div id="id" ... class="control"> 크기를 조정하려면

중 하나를 시도 할 수있는 <div> link

+0

이미 테이블 ID가 – micheal

+0

에 대한 css sir의 100 % db에서 값을 기준으로 div를 설정 한 다음 div 전체의 크기를 조정하면 높이가 짧아집니다. – micheal

+0

테이블의 데이터가 잘리는 경우 꺼져, 그건 정상입니다. 테이블 내에서 데이터를 조정하거나 DataTables와 같은 것을 사용해야합니다. div에 배경색 (예 : 녹색)을 지정하고 표에 다른 배경색 (예 : 빨간색)을 지정하여 표가 실제로 상위 컨테이너 div와 함께 크기 조정되는지 확인합니다. –

0

확실하지, div.table_dataheight 속성을 추가하려고 시도하면 % percent 단위가됩니다.

당신이 % percent 유닛 (0-100) 당신의 <div><table>, 당신이 높이를 설정해야합니다 클래스 control, div.table_data<div>하고 <table>-100% 또는 값의 크기를 조정하고자하는 경우

.

내 코드 그 일을 후 ...

CSS

div.table_data 
{ 
margin-left:2px; 
margin-right:10px; 
margin-top:5px; 
overflow:auto; 
height:70%; 
background-color:#ccffcc; 
} 

(제외 된 -webkit-scrollbar)

HTML

<div id="id" style="height:100%; width250px;background-color:#ff9999;" class="control"> 

    <div id="fifth_heading" class="heading_control"> 
     <i class="fa2 fa-fifth"></i> 
     <p>dddddddd</p> 
     <div class="button_right_second"> 
      <i class="fa3 fa-second3" id="ddd"></i>    
     </div> 
    </div> 

    <div class="fifth_dropdown"> 
     <div class="table_data" id="table_second"> 

     <table id="example3" style="height:100%;" class="display" border="1" cellspacing="0" cellpadding="0"> 
     <!-- the below tr prints the dates --> 
     <tbody> 
      <tr id="line1"> 
      <td> 
       <span id="header_title">Your Current Lead Time</span>    
      </td> 
      </tr> 
      <tr id="line2"> 
      <td> 
       <span id="value">alignvalue</span> 
      </td> 
      </tr> 
     </tbody> 
     </table> 

     </div> 
    </div> 
</div> 

이 조각은 두 <div>을 할 수 있으며, <table>은 크기가 조정됩니다. 창 크기를 조정할 때 d. 당신이 당신의 <table>이 창문의 크기가 너무 작 으면 너무 작은 것을 좋아하지 않는 경우에


, 당신은 min-height CSS 속성을 사용할 수 있습니다. 더 큰 크기의 경우 max-height을 사용하십시오.