使 table 大小在 TD 内与包含 TD 相同

Question

对于我需要做的，我需要在另一个 table 的 TD 中有一个 table，并且需要那个 table 的单元格具有相同的高度和宽度作为包含 table。

一些注意事项：

包含的 TD 不能有固定的高度或宽度，它是根据原始数据的大小动态创建的 table，所以这排除了我使用高度和宽度的能力: 内部 table 上的 100%（仅当父容器具有固定的宽度或高度时才有可能）。

现在table的高度设置为100px，只是为了在下面的图片中更容易看到我在上面做的注释，它不能有固定的高度，因为cell1的内容和单元格 2，需要位于单元格的最顶部，而单元格又需要位于包含 TD 的最顶部和底部。

整个 table 的 HTML 和 CSS 是巨大的，所以这里只是从包含 TD 到保持干净：

.bottomAlign {
  vertical-align: bottom;
}

.innerTable {
  height: 100px;
}

.topAlign {
  vertical-align: top;
}

<td>
  <table class="innerTable">
    <tr class="topAlign">
      <td>Cell 1</td>
    </tr>
    <tr class="bottomAlign">
      <td>Cell 2</td>
    </tr>
  </table>
</td>

这里有一张图片供参考：

Answer 1

这是一个 fiddle 模拟动态大小的 td，以及调整内部大小的片段 table

http://jsfiddle.net/v6hg9vdt/

This is the only part of the fiddle that matters, the rest was just to resize the outer td

var inner = $('.innerTable');
var setInnerSize = function(){
    inner.width(inner.parent().width());
    inner.height(inner.parent().height());  
};

使 table 大小在 TD 内与包含 TD 相同

Make table size within TD same as containing TD

html

css

jquery

html-table