Html 表格宽度超出 div 边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4240986/
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 width goes beyond the div border
提问by user384080
I have table within the div. If I view it with IE9 or FF then it is ok. But if I view it within IE8 the table grows beyond the div border. Any ideas?
我在 div 中有表。如果我用 IE9 或 FF 查看它就可以了。但是如果我在 IE8 中查看它，表格就会超出 div 边界。有任何想法吗？
<div>
<table width="100%" >
<tr>
<td>
</td>
</tr>
</table>
</div>
回答by user384080
found the solution here:
在这里找到了解决方案：
http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/
http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/
The trick is to use the CSS property
table-layout. It can take three values: auto, fixed, and inherit. The normal (initial) value is auto, which means that the table width is given by its columns and any borders. In other words, it expands if necessary.What you want to use is
table-layout:fixed. Bam! Now the table is as wide as you have specified in the CSS. No more, no less. And to my great surprise this seems to be widely supported by browsers. The only browser of any significance that does not support it is IE/Mac, and the significance of that browser is rapidly approaching zero.Next is deciding what to do with the content that doesn't fit in the table anymore. If the table only contains text, word-wrap:break-word (word-wrap is specified in the CSS3 Text Effects Module) will force the browser to break words as necessary to prevent overflow.
诀窍是使用 CSS 属性
table-layout。它可以采用三个值：auto、fixed 和inherit。正常（初始）值为 auto，这意味着表格宽度由其列和任何边框给出。换句话说，它在必要时扩展。您要使用的是
table-layout:fixed. 砰！现在表格和您在 CSS 中指定的一样宽。不多也不少。令我惊讶的是，这似乎得到了浏览器的广泛支持。唯一不支持它的有意义的浏览器是 IE/Mac，并且该浏览器的重要性正在迅速接近零。接下来是决定如何处理不再适合表格的内容。如果表格仅包含文本，word-wrap:break-word（自动换行在 CSS3 文本效果模块中指定）将强制浏览器根据需要对单词进行换行以防止溢出。
回答by J V
You could set it inside its own div with overflow: scroll;so that it makes a scrollbar when the table expands too much...
您可以将其设置在自己的 div 中，overflow: scroll;以便在表格扩展太多时制作滚动条...
回答by ram
Add the style display:tableto the div tag. This causes the element to act like a table.
将样式添加display:table到 div 标签。这会使元素表现得像一张桌子。
回答by Navid Vafaei
As user384080 mentioned, table-layout:fixedshould be added. However, merely having table-layoutdoesn't always fix the problem. Please make sure that you add the widthattribute as well:
正如 user384080提到的，table-layout:fixed应该添加。然而，仅仅拥有table-layout并不总能解决问题。请确保您也添加了该width属性：
<table style="width:100%;table-layout:fixed">
回答by kobe
Give table width as 100% so that it will occupy div and wont cross it.
将表格宽度设为 100%，这样它就会占据 div 并且不会穿过它。
回答by Sebastian Patane Masuelli
check what box-sizing is set by default by the browser.
检查浏览器默认设置的框大小。
box-sizing: content-box; means:
box-sizing: content-box; 方法：
The specified width and height apply to the width and height respectively of the content box of the element. The padding and border of the element are drawn outside this area.
指定的宽度和高度分别应用于元素内容框的宽度和高度。元素的内边距和边框绘制在该区域之外。
box-sizing: border-box; means:
box-sizing: border-box; 方法：
The specified width and height determine the border box of the element. Any padding or border specified on the element is drawn inside the remaining area. The content box is computed by subtracting the padding or border widths of the respective sides from the specified width and height.
指定的宽度和高度决定了元素的边框框。元素上指定的任何填充或边框都绘制在剩余区域内。内容框是通过从指定的宽度和高度中减去相应边的填充或边框宽度来计算的。
it night just be a matter of changing the box-sizingvalue.
there's an article about it here: http://ie8demo.com/BoxSizing.aspx
晚上只是改变box-sizing价值的问题。这里有一篇关于它的文章：http: //ie8demo.com/BoxSizing.aspx
回答by Ray
Do you have a width set on the div? If so, it will stick to its width, allowing the table to overlap. Try removing the width and it will expand to its container's width. If you want thwe div to fit the table size, you can float it.
你在div上设置了宽度吗？如果是这样，它将坚持其宽度，允许表格重叠。尝试删除宽度，它将扩展到其容器的宽度。如果你想让 div 适合表格大小，你可以浮动它。
