Html TABLE 比包含 DIV 更宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5735674/
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
TABLE wider than containing DIV
提问by Youval Bronicki
In the example below, also available here, both WebKit (Safari 5, Chrome 10.0.648.205) and Mozilla (FF 4) keep DIV div around the visible width of the browser window, while the TABLE is as wide as its content.
在下面的示例中，也可在此处获得，WebKit（Safari 5、Chrome 10.0.648.205）和 Mozilla（FF 4）都将 DIV div 保留在浏览器窗口的可见宽度周围，而 TABLE 与其内容一样宽。
I would expect the DIV to grow as wide as the TABLE, but since the behavior is consistent across browsers, I suspect this is a feature rather than a bug.
我希望 DIV 增长得和 TABLE 一样宽，但由于跨浏览器的行为是一致的，我怀疑这是一个功能而不是一个错误。
Interestingly, if the DIV is set to have float:left, it does grow as wide as the table.
有趣的是，如果 DIV 设置为 float:left，它确实会增长到与 table 一样宽。
Any explanations?
有什么解释吗？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Wide Table</title>
<style>
#container {
background-color:blue;
/* float:left;*/
}
</style>
</head>
<body>
<div id="container">
<table >
<tr id="tr">
<td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
</tr>
</table>
</div>
</body>
</html>
回答by mu is too short
Block elements take the width of their parent by default, not the width of their content; height on the other hand, works the other way around: block elements take the height of their content by default rather than the height of their parent. Things work this way because HTML/CSS is built around the usual top-to-bottom layout of English text.
块元素默认采用其父元素的宽度，而不是其内容的宽度；另一方面，高度则相反：默认情况下，块元素采用其内容的高度，而不是其父元素的高度。事情是这样运作的，因为 HTML/CSS 是围绕通常的英文文本从上到下的布局构建的。
So, your #containertakes the width of <body>and then the <table>inside #containeroverflows outside #container. If you put overflow: hiddenon #containeryou'll clip the <table>, overflow-x: auto;on #containerwill add a scrollbar.
因此，您#container的宽度为<body>，然后<table>内部#container溢出外部#container。如果你把overflow: hidden在#container你剪辑<table>，overflow-x: auto;上#container会增加一个滚动条。
UPDATE: As far as floating elements are concerned, the CSS3 spechas this to say:
更新：就浮动元素而言，CSS3 规范是这样说的：
The used value of ‘width' is the computed value, unless that is ‘auto', when used value is the shrink-to-fit width.
'width' 的使用值是计算值，除非它是 'auto'，当使用值是收缩到适合的宽度时。
The default width will be auto so shrink-to-fitit is:
默认宽度将是 auto 所以缩小以适应它是：
Calculation of the shrink-to-fitwidth is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks.
所述的计算收缩以适应的宽度是类似于使用自动表格布局算法计算一个表格单元格的宽度。粗略地：通过格式化内容而不换行而不是在显式换行符发生的地方计算首选宽度，并且还计算首选最小宽度，例如，通过尝试所有可能的换行符。
There are no possible line breaks in your <table>so the floated #containerwill take on the entire width of its <table>child.
没有可能的换行符，<table>因此浮动#container将占据其<table>子项的整个宽度。
回答by Brett
I generally set the size of the div, and let the table adjust itself to the div. Not sure if that bit of insight will help or not.
我一般是设置div的大小，让table自己调整到div。不确定那一点洞察力是否会有所帮助。
