表格單元格內的全高表格

Question

我一直在從事必須以HTML表格形式生成的項目。

該頁面具有一個包含兩行的外部表：標題/品牌單元格，然后是包含第二個表的單元格。

該表由應用程序動態生成，並且可以具有任意數量的行和列。 該應用程序確定請求的行數和列數，並相應地吐出html。

每個創建的單元格都將另一個表作為“小部件”包含標題行和內容行，如下所示。 內容行包含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>

這是整個布局的小提琴減去圖表（我使用填充文本）。 這是一個屏幕截圖：

我需要做的是讓“ widget table”始終填充其封閉的表格單元，因為頁面已調整大小並且表格可以彎曲。 我嘗試了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/