테이블의 HTML 테이블 100 % 높이

Question

테이블의 높이에 약간의 문제가 있습니다.

나는 부모 테이블을 가지고있다. (나는 알고있다. 테이블을 알고있다.) 그러나 선택의 여지가 없다. (하나의 행을 가지고있다.) .. 2 개의 셀을 포함하고있다. 각 셀은 자신의 테이블을 가지고있다. 그 둘 사이에 테두리가 있으므로 아무리 많은 내용이 있더라도 경계를 맞추기 위해 둘 다 동일한 높이를 유지하고 싶습니다. (내용이 유연하므로 내용을 설정할 수 없습니다)

아래 코드를 실행하고 HTML 파일에 덤프하면 (Chrome에서 적어도) 올바른 자식 테이블이 해당 셀의 100 %를 채우지 못합니다. 부모 테이블에서 "height : auto"를 제거하면 작동하지만 부모 테이블의 높이를 100 %로 만듭니다.

왜이 두 가지가 서로 영향을 줍니까? 노트의

<style> 
.cl2_h { background:red; } 
.cl1_h { background:blue;} 
.cl1, .cl2{ width:100%; border:1px solid black;} 
table, tbody { height:100%; } 
</style> 


<table style="border:1px solid red;height:auto;"> 
<tbody> 
<tr style="height:100%;"> 
    <td style="width:50%"> 
     <table class="cl2" style="text-align:left;"> 
      <tbody> 
       <tr class="cl2_h"> 
        <td> 
         RANDOM TEXT HERE 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <span>Select which asd asdthis item relates to.</span> 
         <ul> 
          <li> 
           <select> 
            <option value="-1">Please Select...</option> 
           </select> 
          </li> 
          <li> 
           <select> 
            <option value="302">Please Select...</option> 
           </select> 
          </li> 
         </ul> 
         SOME RANDOM TEXT 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </td> 
    <td> 
     <table class="cl2" style="height:100%"> 
      <tbody> 
       <tr class="cl2_h"> 
        <td> 
         asd asd asd asda sda(NTF) 
        </td> 
       </tr> 
       <tr> 
        <td> 
         DROPDOWNLIST Here 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </td> 
</tr> 
</tbody> 
</table> 

뭔가 그래서 진짜 문제는 때 "자동"높이의 부모 테이블의 내부 작동하지 않는 이유를 추측 ... 난 200 픽셀로 부모를 설정하면 다음 작업을 계속한다는 것입니다

Answer 1

이 사용하는 자바 스크립트/jQuery를 수행 할 수 있습니다

Answer 2

스티브, "높이 : 자동차"가 포함 된 테이블의 최종 높이가 있으므로 100 % 일 무슨 렌더링 시간에 브라우저를 통보하지 않습니다 자식 테이블에 구문 적으로 불필요합니다.

부모 컨테이너에 지정된 높이로 CSS를 지정하거나 높이를 지정하지 않은 경우에만 어린이는 렌더링시 "100 %"를 의미합니다.

상위 테이블에 높이 : 자동을 유지해야하는 경우 @RobB에는 좋은 자바 스크립트 솔루션이 있지만 상위 테이블의 특정 높이를 설정하거나 도움이 될만한 위치를 설정하지 않는 것이 좋습니다.