Full-height tables inside table cells

Question

I am stuck working on this project that has to be produced as HTML tables.

The page has an outer table with 2 rows: a header/branding cell and then a cell that holds a second table.

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.

Every created cell holds another table as a "widget" with the title row and a content row, as shown below. The content row holds an SVG chart.

<table class="widget">
       <tbody>
           <tr id="trtitlewidget22">
               <td id="titlewidget22" class="widget-header"><h3>Enquiries</h3></td>
          </tr>
          <tr>
             <td class="widget-content" id="widget22">
                   [this would be a js svg chart]
             </td>
           </tr>
         </tbody>
    </table>

Here is a fiddle of the whole layout minus the charts (i used filler text). Here's a screen cap:

enter image description here

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.

Anyway, setting height: 100% on .widgets-container does work for me: http://jsfiddle.net/BoltClock/5LeK6/1 (I also fixed one of your selectors, `table#index > td` needs to be `table#index > tbody > tr > td` - see [this question](http://stackoverflow.com/questions/5568859/why-doesnt-table-tr-td-work-when-using-the-child-selector)) — BoltClock, May 20 '14 at 17:29
can you wrap the inside table to a div? Or you can't mess up with the app generator? — LcSalazar, May 20 '14 at 18:09

score 0 · Answer 1 · answered May 20 '14 at 18:21

I couldn't figure a css-only solution. I would go for a javascript approach. Here's how you can do it easily with JQuery. If you want it vanilla, is possible either:

var fitHeight = function() {
    $("table.widget").each(function() {
        $(this).removeAttr("style");
    });

    //It has to be separate from the remove loop, so the height will be re-applied.
    $("table.widget").each(function() {
        $(this).height($(this).parent().height());
    });
}

$(window).resize(fitHeight);
$(document).ready(fitHeight);

http://jsfiddle.net/5LeK6/5/

Full-height tables inside table cells

1 Answers1