如何使HTML表格行适合其内容 [英] How to fit HTML table row to its content

问题描述

我的< table> 有三行和列，最后一行表格如下：

My <table> has three rows and columns, with the last table row like this:

<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，除此之外，表或其行/列没有其他样式：

Now the odd thing that I can not figure out is that the <tr> is almost twice as high as its content. Both <hr> and <div> together sit quite nicely aligned to the top of the table row, and then there are almost 150px empty space to the bottom of the table. Padding and margin and border for all elements are 0, and there is not much other styling to the table or its rows/columns other than this:

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

如何使表格行适合其内容的高度，摆脱底部的大空间？我已经分配高度到这里的表，以确保它伸展到窗口的底部，如果窗口大于表将是。我假设是过大的< tr> 起源。为了补偿这种伸展，我试着在 min-height：100px上添加网站地图上方的额外< tr>

How can I make that table row fit the height of its content, and get rid of the big space at the bottom? I have assigned the height to the table here to make sure it stretches to the bottom of the window if the window is larger than the table would be. I assume that is where the overly large <tr> originates. To compensate for that stretch, I tried to add the extra <tr> above the sitemap with a min-height:100px; max-height:none; but that didn't help.

EDIT 修正错误。

EDIT 可能还需要更多背景知识。

EDIT Maybe a little more background on this.

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

推荐答案

感谢您的反馈！删除表{height：100％; } 没有工作，因为它不会将表伸展到页面底部。这个伸展是我想要的，但我认为这也是导致此问题所指的过度膨胀的< tr> 。

Thank you for the feedback! Removing the table { height: 100%; } did not work because it doesn't stretch the table to the bottom of the page. This stretching is what I wanted, but I think this is also what caused the overly inflated <tr> which this question refers to.

这个解决方案更像是一个意外：

The solution to this was more of an accident:

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

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

With this, the row shrinks to the size of its content, while the table still stretches to the bottom of the page. Not sure if this is a "healthy" solution, but is sure works.

这篇关于如何使HTML表格行适合其内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！