Question

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

如果第二列比第一列短，则会导致整个表结构掉落部分。如何设置内表的高度以便它可以固定外表高度？

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%;
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

将外表的高度设置为100％，然后将外表包装在div中，使其实际上不跨越包含元素的整个高度。

<div>
<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>
<div>

如何设置内表的高度

2 个答案: