html - 表格单元格内的全高表格

Question

我一直在处理这个必须生成为 HTML 表格的元素。

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

此表由应用程序动态生成，可能包含任意数量的行和列。该应用确定请求的行数和列数，并相应地吐出 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>

Here is a fiddle of the whole layout减去图表(我使用填充文本)。这是一个屏幕截图:

我需要做的是让“小部件表格”在调整页面大小和表格 flex 时始终填充其封闭的表格单元格。我试过高度 100% 无济于事。

Answer 1

我想不出一个纯 css 的解决方案。我会选择 javascript 方法。下面介绍如何使用 JQuery 轻松完成此操作。如果你想要 Vanilla 味，也可以:

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/