如何使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>坐在一起很好地对准表行的顶部,然后有近150像素空白表的底部.所有元素的填充和边距以及边框都是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%; }无效,因为它没有将表拉伸到页面底部.这种拉伸是我想要的,但我认为这也是导致<tr>这个问题所指的过度膨胀的原因.

解决这个问题更多的是一个意外:

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

这样,行缩小到其内容的大小,而表仍然延伸到页面的底部.不确定这是否是一个"健康"的解决方案,但肯定有效.