テーブル内のHTMLテーブル100％の高さ

Question

私はテーブルの高さにちょっとした問題があります。

私は親テーブルを持っていますが、私はテーブルを知っています...しかし、私は選択肢がありません:(）は、2つのセルを含む1つの行を持っています。どのくらいの量のコンテンツがあっても境界線が一致するように両者を同じ高さに保つことができます（コンテンツは柔軟に設定できないため、設定できません）

下のコードをクリックし、htmlファイルにダンプしてください（Chromeでは少なくとも）右の子テーブルがそのセルの100％を占めていません。親テーブルの "height：auto"を削除するとそれは動作しますが、親テーブルも100％の高さになります。

なぜこれらの2つのことがお互いに影響を及ぼしますか？

<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> 

ノートの何かが、私は200pxのに親を設定した場合、それが動作し続けていることです...だから私は時に「オート」の高さの親テーブル内のそれが動作しない理由本当の問題があると思います

Answer 1

あなたはJavascriptを/ jQueryの使用して、これを達成することができます

Answer 2

スティーブ、「高さ：自動」を含むテーブルの最終高さはそれほど100％になりますどのようなレンダリングのための時間にブラウザを通知しません構文的に余計なものです。

親コンテナに指定された高さ（または高さを指定しない）を指定した場合のみ、子供はレンダリング時に "100％"の意味を知ります。

親テーブルの高さ：autoを保持する必要がある場合は、@ RoBBには優れたjavascriptソリューションがありますが、親テーブルの特定の高さを設定するか、