9

我的<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;但没有帮助。

编辑修正错别字。

编辑也许对此有更多的背景。

+--------------------------------+ 浏览器窗口（html 正文）
| +----------------------------+ |
| | 横幅图片 | | 这里有一个横幅图像，横跨整个页面
| +----------------------------+ |
| | css 菜单栏 | | 从 ul 构建的标准 CSS 菜单
| +----------------------------+ | 这是表格开始的地方，它有三列
| | td | td | td | |
| | | | | |
| +----------------------------+ |
| | tr colspan=3 腾出空间 | | 在上面的内容和下面的站点地图之间有一个栏目
| +----------------------------+ |
| | tr colspan=3 用于站点地图 | | tr 从上方，如果 table { height: 100%; 则向下延伸的站点地图 }
| +----------------------------+ |
| | 当桌子没有高度设置时，这是大窗口中的空间。
+--------------------------------+
4

4 回答 4

11

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

对此的解决方案更像是一个意外：

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

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

于 2013-06-29T22:33:21.083 回答
2

移除高度

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

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

在此处输入图像描述

为什么要 100%html的高度body？另外，我会There's a <ul> here改为There's a &lt;ul> here

于 2013-06-27T11:48:18.090 回答
0

一旦你修复了你的标签并正确关闭它们，你会看到TR高度很大，因为UL边距正在拉伸它，如果你修改这个标签的 CSS，它会变小在这里检查它

ul {
    margin: 0;
    padding: 0;
}

对于另一侧，例如您的表格只有 1 行，如果您将样式添加height: 100%到表格中，该行将拉伸到最大，您可以修改样式以使其像这样检查它

table {
    width: 100%;
}
于 2013-06-27T11:45:35.143 回答
0

http://jsfiddle.net/9jMR8/ 也许像这样？更改了 div 的 bg-color ..

像这样更改CSS：

html, body{
width: 100%;
height: 100%;
}
table{
border:1px solid black;     
width:100%;
}
div{
background-color:blue;
}
于 2013-06-27T11:53:14.247 回答