如何使 HTML 表格行适合其内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17342181/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fit HTML table row to its content
提问by Jens
My <table>has three rows and columns, with the last table row like this:
我的<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>
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:
现在我无法弄清楚的奇怪事情<tr>是几乎是其内容的两倍。双方<hr>并<div>坐在一起很好地对准表行的顶部，然后有近150像素空白表的底部。所有元素的填充、边距和边框都是 0，除此之外，表格或其行/列没有太多其他样式：
html, body, table {
width: 100%;
height: 100%;
}
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.
如何使该表格行适合其内容的高度，并摆脱底部的大空间？我在这里指定了桌子的高度，以确保如果窗口比桌子大，它会延伸到窗口的底部。我认为这就是过大的<tr>起源。为了弥补这一点，我尝试<tr>在站点地图上方添加额外的，min-height:100px; max-height:none;但这没有帮助。
EDITFixed typos.
编辑修正了错别字。
EDITMaybe 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.
+--------------------------------+
回答by Jens
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.
感谢您的反馈！删除table { height: 100%; }无效，因为它不会将表格拉伸到页面底部。这种拉伸是我想要的，但我认为这也是导致<tr>这个问题所指的过度膨胀的原因。
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.
这样，行会缩小到其内容的大小，而表格仍会延伸到页面底部。不确定这是否是一个“健康”的解决方案，但肯定有效。
回答by davidkonrad
remove height
移除高度
html, body, table {
width: 100%;
}
and it looks like this (no more overhead in <tr>height)
它看起来像这样（没有更多的开销<tr>height）
Why 100% height on htmland bodyanyway? Also, I would change There's a <ul> hereto There's a <ul> here
为什么100％的高度上html和body呢？另外，我会There's a <ul> here改为There's a <ul> here
回答by davidkonrad
http://jsfiddle.net/9jMR8/Maybe like this? Changed the bg-color of the div..
http://jsfiddle.net/9jMR8/也许像这样？改变了div的bg-color ..
Changed the css like this:
像这样改变了css：
html, body{
width: 100%;
height: 100%;
}
table{
border:1px solid black;
width:100%;
}
div{
background-color:blue;
}
回答by maqjav
Once that you fix your tags and close them properly you will see that the TRheight is that big because ULmargins are stretching it, if you modify the CSS for this tag it will be smaller check it here
一旦你修复你的标签并正确关闭它们，你会看到TR高度是那么大，因为UL边距正在拉伸它，如果你修改这个标签的 CSS 它将变小，请在此处检查
ul {
margin: 0;
padding: 0;
}
For other side like your table has only 1 row, if you add the style height: 100%to the table, that row will stretch to the maximum, you can modify the style to leave it like this check it
对于另一边，例如您的表格只有 1 行，如果您将样式添加height: 100%到表格中，该行将拉伸到最大，您可以修改样式以保留它这样检查它
table {
width: 100%;
}
