title: Full-height tables inside table cells
body: <p>I am stuck working on this project that has to be produced as HTML tables.</p>
  
  <p>The page has an outer table with 2 rows: a header/branding cell and then a cell that holds a second table. </p>
  
  <p>This table is dynamically generated by an app and might have any number of rows and columns.  The app determines the number of rows and columns requested and spits out the html accordingly.</p>
  
  <p>Every created cell holds <strong>another</strong> table as a "widget" with the title row and a content row, as shown below.  The content row holds an SVG chart.</p>
  
  <pre><code>&lt;table class="widget"&gt;
         &lt;tbody&gt;
             &lt;tr id="trtitlewidget22"&gt;
                 &lt;td id="titlewidget22" class="widget-header"&gt;&lt;h3&gt;Enquiries&lt;/h3&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
               &lt;td class="widget-content" id="widget22"&gt;
                     [this would be a js svg chart]
               &lt;/td&gt;
             &lt;/tr&gt;
           &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/smlombardi/5LeK6/" rel="nofollow noreferrer">Here is a fiddle of the whole layout</a> minus the charts (i used filler text).  Here's a screen cap:</p>
  
  <p><img src="https://i.stack.imgur.com/Uqunx.jpg" alt="enter image description here"></p>
  
  <p>What I need to do is have the "widget table" always fill its enclosing table cell, as the page is resized and the table flexes.  I have tried height 100% to no avail.</p>