如何使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>一起非常好地与表格行的顶部对齐，然后在表格的底部有大约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%; }不起作用，因为它不会将表拉伸到页面底部。这种拉伸是我想要的，但我认为这也是导致这个问题所引用的过度膨胀<tr>的原因。

对此的解决方案更多是一次意外：

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

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

Answer 2

删除身高

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

它看起来像这样（<tr> height中没有更多的开销）

为什么html和body的高度为100％？另外，我会将There's a <ul> here更改为There's a <ul> here

Answer 3

修复标记并正确关闭后，您会发现TR高度很大，因为UL边距正在拉伸它，如果修改此标记的CSS，它会更小check it here

ul {
    margin: 0;
    padding: 0;
}

对于像您的表只有1行的其他方面，如果您将样式height: 100%添加到表中，该行将延伸到最大值，您可以修改样式以保留它{{3} }

table {
    width: 100%;
}

Answer 4

http://jsfiddle.net/9jMR8/ 也许是这样的？改变了div的bg颜色..

改变了这样的css：

html, body{
width: 100%;
height: 100%;
}
table{
border:1px solid black;     
width:100%;
}
div{
background-color:blue;
}