表格单元格内的全高表

Question

我无法处理这个必须作为HTML表生成的项目。

页面有一个包含2行的外表：标题/标题单元格，然后是包含第二个表格的单元格。

此表由应用程序动态生成，可能包含任意数量的行和列。该应用程序确定所请求的行数和列数，并相应地吐出html。

每个创建的单元格都将另一个表格作为＆＃34;小部件＆＃34;标题行和内容行，如下所示。内容行包含SVG图表。

<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减去图表（我使用填充文字）。这是一个屏幕上限：

我需要做的是拥有＆＃34;小部件表＆＃34;当页面调整大小并且表格弯曲时，总是填充其封闭的表格单元格。我已经尝试了100％的高度无济于事。

Answer 1

我无法想出一个仅限CSS的解决方案。我会采用javascript方法。以下是如何使用JQuery轻松完成的。如果你想要香草，可以：

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/