html - 如何使 HTML 表格行适合其内容

Question

我的 <table>有三行和三列，最后一个表行是这样的:

<tr>
 <td colspan="3" align="center" valign="top" style="background-color: #eeeeee;">
  <hr class="vdivider">
  <div class="sitemap">There's an unordered list in here</div>
 </td>
</tr>

现在我想不通的是 <tr>几乎是其内容的两倍。两者 <hr>和 <div> together sit quite nicely aligned to the top of the table row, 然后有几乎 150px 的空白空间到表的底部。所有元素的填充、边距和边框均为 0，除此之外，表格或其行/列没有太多其他样式:

html, body, table {
  width: 100%;
  height: 100%;
}

如何使表格行适合其内容的高度，并摆脱底部的大空间？我在这里为表格分配了高度，以确保如果窗口比表格大，它会延伸到窗口的底部。我假设那是过大的地方 <tr>起源。为了弥补这一点，我尝试添加额外的 <tr>在站点地图上方带有 min-height:100px; max-height:none;但这没有帮助。

编辑修正错别字。

编辑 或许有更多背景知识。

+--------------------------------+  browser window (html body)
| +----------------------------+ |
| |       banner image         | |  there is a banner image here that stretches across the page
| +----------------------------+ |
| | css menu bar               | |  a standard CSS menu built from ul
| +----------------------------+ |  this is where the table starts, it has three columns
| |  td   |  td           | td | |
| |       |               |    | |
| +----------------------------+ |
| | tr colspan=3 to make space | |  there's column to make space between content above and sitemap below
| +----------------------------+ |
| | tr colspan=3 for sitemap   | |  tr from above, the sitemap which stretches way down if table { height: 100%; }
| +----------------------------+ |
|                                |  this is the space in large windows when table has no height setting.
+--------------------------------+

Answer 1

感谢您的反馈!删除 table { height: 100%; }不起作用，因为它不会将表格拉伸(stretch)到页面底部。这种拉伸(stretch)是我想要的，但我认为这也是导致过度膨胀的原因 <tr>这个问题指的是什么。

这个问题的解决方案更像是一个意外:

<tr style="height: 0;">
  ...
</tr>

有了这个，行缩小到其内容的大小，而表格仍然延伸到页面底部。不确定这是否是一个“健康”的解决方案，但肯定有效。