テーブルが100％含まれていることを確認する

Question

<style> 
     .topTable 
     { 
      border-top:1px solid #333333; 
      border-right:1px solid #333333; 
     } 

     .topTable td, th 
     { 
      border-left:1px solid #333333; 
      border-bottom:1px solid #333333; 
     } 

     .topTable .inner 
     { 
      border-width:0px; 
      position:relative; 
      top:0px; 
      left:0px; 
      height:100%; 
      width:100%; 
     } 
     .topTable .container 
     { 
      padding:0px; 
      border-width:0px; 
      position:relative; 
     } 
    </style> 

    <table cellpadding="4" class="topTable" cellspacing="0" style="background-color:#f0f0f0;"> 
     <tr> 
      <th>Option A</th> 
      <td class="container"> 
       <table cellpadding="4" class="inner" cellspacing="0" style="background-color:#f0a0a0;"> 
        <tr> 
         <td>Part 1</td> 
         <td>Part 2</td> 
        </tr> 
       </table> 
      </td> 
      <td class="container"> 
       <table cellpadding="4" class="inner" cellspacing="0" style="background-color:#a0f0a0;"> 
        <tr> 
         <td>Part 3</td> 
        </tr> 
        <tr> 
         <td>Part 3</td> 
        </tr> 
       </table> 
      </td> 
      <td>Done</td> 
     </tr> 
    </table> 

TD内のテーブルが高さ：100％で、何も動作していないようです。この場合、データは各サブテーブルで動的になるため、私はrowspanを使用できません。これらのテーブルに格納されているテーブルの高さを最大限に活用するCSSが必要です。ブロック要素を扱うときにこれが簡単だと思っていましたが、単純に機能していない私が試してみてどんなトリックか

Answer 1

jQueryを使用した回避策が見つかりました。

誰かがこれに似たものを掲載していたと私は、これらのニーズを満たすためにそれを修正：

$(function() { 
     $('td.container').each(function() { 
      var $this = $(this); 
      var panelheight = $this.height(); 
      $this.children('table.inner').height(panelheight); 
     }) 
    }); 

ちょうど含む各TDも「コンテナ」とストレッチする必要があり、その中のテーブルの上にクラスを作成する必要がありそのコンテナの高さと 'inner'を一致させるこのjQueryはそこから継承されます。

Answer 2

これは私が何ができる最善である： http://jsfiddle.net/jc5qf/2/

は、それはあなたが正しい道を下って行く取得します願っています。