Question

我有一张这样的表：

 ---------- ----------
|          |          |
|  header  |  header  |
|          |          |
 ---------- ----------
|          |          |
|  ......  |  ......  |
|          |          |
 ---------- ----------





---- bottom of parent ----

我希望<tr>的高度具有最大值，并且我希望<table>的高度具有最大值，因此<tr>的高度应该能够收缩，以便我可以得到这个结果：

 ---------- ----------
|  header  |  header  |
 ---------- ----------
|  ......  |  ......  |
 ---------- ----------
|  ......  |  ......  |
 ---------- ----------
|  ......  |  ......  |
 ---------- ----------
|  ......  |  ......  |
 ---------- ----------
|  ......  |  ......  |
 ---------- ----------
|  ......  |  ......  |
 ---------- ----------
|  ......  |  ......  |
 ---------- ----------
---- bottom of parent ----

但是，我也不想得到这样的结果：

 ---------- ----------
|          |          |
|          |          |
|          |          |
|          |          |
|          |          |
|  header  |  header  |
|          |          |
|          |          |
|          |          |
|          |          |
|          |          |
 ---------- ----------
|          |          |
|          |          |
|          |          |
|          |          |
|          |          |
|  ......  |  ......  |
|          |          |
|          |          |
|          |          |
|          |          |
|          |          |
 ---------- ----------
---- bottom of parent ----

我的代码就是这些。

我尝试使用min-height，max-height，height等等，但到目前为止似乎没有解决方法。

<style>
  table { height: 400px }
  tr    { /* don't know what to put here */ }
</style>

<table>
  <thead>
    <tr>
      <th>header</th><th>header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <...>
    </tr>
  </tbody>
</table>

我知道我可以通过添加一个包装器并在表中设置100％的max-height来解决这个问题，但我正在使用的代码是使用某些脚本生成表而我无法添加我心中的<div>。

另外，我必须指定我最多可以容纳20行（由于存在大量数据，因此通常会完全耗尽和分页），并且我需要将表的高度设置为特定的当使用20行时的大小，但在某些情况下，需要少于20行，并且当发生这种情况时，行的高度会变得拉伸。当只有一行时，它会变得荒谬。

有什么想法吗？

Answer 1

阅读本文可以帮助您： http://www.w3schools.com/css/css_table.asp

为什么不使用“padding-top”和“padding-bottom”来设置表格行的高度？

Answer 2

如果我理解你的要求，你希望表格扩展到其父高度的100％，直到达到最大值。

我想我已经得到了它：http://jsfiddle.net/xs65gev7/1/

.parent { height:100vh; border:1px solid green; }
.table { height:100%; max-height:400px; border:1px solid red; }
.cell { border:1px blue solid; }

我使用100vh让父级将其扩展到窗口高度，因此您可以调整窗口大小以试验表格行为。桌子有高度：100％和最大高度：400px，我相信它可以实现你想要的效果。

关于无法添加div作为父级，您需要使用表的父级（或祖先）来设置封闭高度。 Something 必须限制表格的高度，如果它将缩小到固定的最大高度以下。

具有可变行高的HTML / CSS表

2 个答案: