html - 如何设置内表的高度

Question

在我的第二列中，我需要动态显示一些行。所以我认为使用 rowspan 的选项在这里不是最佳选择。我想我可能需要在第二列中有一个内表。但问题是内表的内部高度。

如果第二列比第一列短，会导致整个表结构分崩离析。如何设置内表的高度，使其可以固定外表的高度？

JSFIDDLE

html

<table class="outter">
<tr>
    <td>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
    </td>
    <td>
        <table class="inner">
            <tr>
                <th>header</th>
            </tr>
            <tr>
                <td>a</td>
            </tr>
        </table>
    </td>
</tr>
</table>

---

CSS:

.outter, .inner {
  border-collapse: collapse;
}
.outter {
    width: 100%;
    background: red;
}

.inner {
    width: 100%;
    height: 100%;
    background: green;
}

Answer 1

如果你想让内表的高度使用外表的全高你必须在外表上设置一个高度:

.outter {
    width: 100%;
    background: red;
    height:100%;
}

.outter,
.inner {
  border-collapse: collapse;
}
.outter {
  width: 100%;
  background: red;
  height: 100%;
}
.inner {
  width: 100%;
  height: 100%;
  background: green;
}

<table class="outter">
  <tr>
    <td>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
    </td>
    <td>
      <table class="inner">
        <tr>
          <th>header</th>
        </tr>
        <tr>
          <td>a</td>
        </tr>
      </table>
    </td>
  </tr>
</table>