Question

我有这样的div表格布局：

...但是我想在右边的嵌套表中匹配左边表格的高度，这样右边的表格行间隔相等。似乎有一些填充正在阻止右表填充其容器的整个高度。

我想要的就是这个（这是一个模拟Photoshop，但你明白了）：

我不想在外部容器上设置固定高度。左右桌面高度应匹配最高的桌面高度。我目前正在使用div表解决方案来包含表格，因为它解决了表格容器（浅绿色）高度匹配的问题（我对其他可能的解决方案持开放态度）。然而，它仍然留下了较短的桌子没有填充它的容器的高度的问题，如在图像中。

Here's a fiddle.

HTML：

<div class="outer-container">
    <div class="inner-container">
      <div class="child">
        <table>
          <tr>
            <td>Label 1a</td>
            <td>Value 1a</td>  
          </tr>
          <tr>
            <td>Label 1b</td>
            <td>Value 1b</td>
          </tr>
          <tr>
            <td>Label 1c</td>
            <td>Value 1c</td>
          </tr>
          <tr>
            <td>Label 1d</td>
            <td>Value 1d</td>
          </tr>
          <tr>
            <td>Label 1e</td>
            <td>Value 1e</td>
          </tr>
        </table>
      </div>
      <div class="spacer"></div>
      <div class="child">
        <table>
          <tr>
            <td>Label 2a</td>
            <td>Value 2a</td>
          </tr>
          <tr>
            <td>Label 2b</td>
            <td>Value 2b</td>
          </tr>
          <tr>
            <td>Label 2c</td>
            <td>Label 2c</td>
          </tr>
      </table>
    </div>
  </div>
</div>

和样式：

.outer-container {
  display: table;
  padding: 10px;
  background: #5f5f5f;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.inner-container {
    display: table-row;
    padding: 10px;
    margin-top: 50px;
    width: 100%;
}
.child {
    display: table-cell;
    background: #d3e4d1;
    border: 1px solid white;
}
.spacer {
  display: table-cell;
  width: 10%;
}
.child table {
    width: 100%;
    height: 100%;
    padding: 10px;
}
.child td {
    width: 50%;
}
.child td:first-child {
    text-align: right;
    padding-right: 10px;
}

需要IE8及以上解决方案。

Answer 1

表格单元格内容填满了单元格的高度，表格（和表格单元格）只是大小不同，因为内容不同，并且它们没有被声明为相同的高度。

这是一个非常小的工作示例：https://jsfiddle.net/egzs1sm3/

如果您愿意，可以删除嵌套的div并将静态高度应用于table，我不明白为什么不这样做。

Answer 2

以下是如何通过flexbox完成它：

https://jsfiddle.net/tqvqsd2y/1/

容器上的

display:flex是无关紧要的，只是为了比较而使它们紧挨着彼此。没有理由你不能使用它，我认为这是你想要的。

Answer 3

我再次。

他们必须是独立的桌子吗？因为同一个表格中的两个单元格会自动调整高度并证明内容合理......

<table>
  <tbody>
    <tr>
      <td>
        <h3>
          <span>asdf 1</span>
          <span>asdf 2</span>
        </h3>
        <h3>
          <span>asdf 1</span>
          <span>asdf 2</span>
        </h3>
      </td>
      <td>
        <h3>
          <span>asdf 1</span>
          <span>asdf 2</span>
        </h3>
        <h3>
          <span>asdf 1</span>
          <span>asdf 2</span>
        </h3>
        <h3>
          <span>asdf 1</span>
          <span>asdf 2</span>
        </h3>
      </td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/7w963q7v/

注意不同的标签现在是块元素中的内联元素。

Answer 4

我已更改现有的HTML，也适用于 IE8 。虽然我没有对它进行测试，但我确信，它不会偏离。

选项1：

在主cellspacing上使用table。

请找到以下结构：

<div class="outer-container">
  <div class="inner-container">
    <table cellspacing="15">
      <tbody>
        <tr>
          <td class="child">
            <table>
              <!-- put your contents of the first table -->
            </table>
          </td>
          <td class="child">
            <table>
              <!-- put your contents of the second table -->
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

观看演示here。

选项2：

不使用cellspacing。

<div class="outer-container">
  <div class="inner-container">
    <table> <!-- no 'cellspacing' here -->
      <tbody>
        <tr>
          <td class="child">
            <table>
              <!--put your contents of the first table -->
            </table>
          </td>
          <td class="spacer"></td> <!-- class spacer with 'width: 10%' -->
          <td class="child">
            <table>
              <!--put your contents of the second table -->
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

观看演示here。

更新1：

查看更新的demo：

我不认为，嵌套height的{{1}}只能使用CSS占据最大table的高度。这就是为什么我让他们的父母成为table，它填满容器并且不仅取决于其元素的内容大小，而是其所有兄弟姐妹中最大的一个td。 {1}}＆＃39; S

无论如何，总是可以使用JS或CSS来定位任何其他元素的子元素。

如何使CSS表格单元格内容填充单元格的高度？

4 个答案:

更新1：