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

My

有三行和三列，表的最后一行如下所示：

<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>

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

如何使该表行适合其内容的高度，并消除底部的大空间？我在这里为桌子指定了高度，以确保如果窗户比桌子大，桌子会延伸到窗户底部。我假设这就是过大的

的来源。为了弥补这一不足，我尝试在站点地图上方添加额外的

，最小高度为100px；最大高度：无但这没有帮助

编辑修复打字错误

编辑可能需要更多的背景知识

+--------------------------------+ 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. +--------------------------------+ +--------------------------------+浏览器窗口（html正文） | +----------------------------+ | ||横幅图像| |这里有一幅横幅图像，横贯页面 | +----------------------------+ | || css菜单栏| |由ul构建的标准css菜单 |+------------------------------+|这是表格的起始位置，它有三列 || td | td | td || | | | | | | | +----------------------------+ | || tr colspan=3来腾出空间| |在上面的内容和下面的站点地图之间有一列来腾出空间 | +----------------------------+ | || tr colspan=3对于站点地图| | tr从上方，如果表{height:100%；}向下延伸的站点地图 | +----------------------------+ | ||这是大窗口中桌子没有高度设置时的空间。 +--------------------------------+

---

一旦您修复了标签并正确关闭它们，您将看到

TR

高度非常大，因为

UL

边距正在拉伸它，如果您修改此标签的CSS，它将更小

对于另一面，如您的表格只有一行，如果您将样式

height:100%

添加到表格中，该行将拉伸到最大值，您可以修改样式使其保持如下状态

删除高度

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

它看起来是这样的（在

高度中没有更多的开销）


为什么在
html
和
body
上显示100%的高度？另外，我会将
这里有一个
更改为
这里有一个

也许是这样？更改了分区的背景颜色

更改css如下：

<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>

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

谢谢你的反馈！删除
表{height:100%；}
无效，因为它不会将表拉伸到页面底部。这是我想要的，但我认为这也是导致这个问题所指的过度膨胀的原因

解决这个问题的办法更像是一场事故：

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


...

这样，行缩小到其内容的大小，而表仍然延伸到页面底部。不确定这是否是一个“健康”的解决方案，但确实有效。
您的代码的实时链接或jsfiddle将帮助我们。请链接或小提琴。您是否也重置了UL标签？使用padding和margin 0px
这里有一个ul
不是
这里有一个
是的@格林先生：我的意思是在
中有一个无序的列表。删除高度：100%成功了，看起来是这样。我认为这是我从未真正重温过的旧代码的遗物，没有必要吗？事实上，没有。当我删除
高度时
最后一行表格不在浏览器窗口的底部，窗口比表格大。似乎我需要另一个允许拉伸的“橡胶”
。移除
高度：100%
确实解决了tr与其内容物匹配的问题，但随后桌子末端不再对齐并拉伸到身体底部……最近我遇到了同样的问题，但我无法让它工作，直到我将高度设置为1px。事实上（在Chrome 51.0.2704.103上测试）对于我来说，至少有一行必须具有
高度：1
才能工作。我在我的标签页上添加了一个空行，高度为1，它起作用了。0在Chrome中似乎起作用，但在FF中不起作用。1px或1%似乎在两种浏览器中都有效。
<tr style="height: 0;">
  ...
</tr>