Html 表在 Div 外溢出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2259189/
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 Overflowing Outside of Div
提问by waiwai933
I'm trying to stop a table that has width explicatly declared not to overflow outside of it's parent div. I presume I can do this in some way using max-width, but I can't seem to get this working.
我正在尝试停止一个表，该表的宽度被明确声明不会溢出到它的父级之外div。我想我可以使用 以某种方式做到这一点max-width，但我似乎无法做到这一点。
The following code (with a very small window) will cause this:
以下代码（带有一个非常小的窗口）将导致这种情况：
<style type="text/css">
#middlecol {
width: 45%;
border-right:2px solid red;
}
#middlecol table {
max-width:100% !important;
}
</style>
<div id="middlecol">
<center>
<table width="400" cellpadding="3" cellspacing="0" border="0" align="center">
<tr>
<td bgcolor="#DDFFFF" align="center" colspan="2">
<strong>Notification!</strong>
</td>
<tr>
<td width="50">
<img src="http://www.example.com/img.png" width="50" height="50" alt="" border="0">
</td>
<td>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</td>
</tr>
</table>
</center>
</div>
The red line is the right border of the div, and if you make your browser window small, you'll see that the table doesn't fit into it.
红线是 的右边框div，如果您将浏览器窗口变小，您会看到表格无法放入其中。
采纳答案by Zyphrax
Turn it around by doing:
通过执行以下操作来扭转它：
<style type="text/css">
#middlecol {
border-right: 2px solid red;
width: 45%;
}
#middlecol table {
max-width: 400px;
width: 100% !important;
}
</style>
Also I would advise you to:
另外我建议你：
- Not use the
centertag (it's deprecated) - Don't use
width,bgcolorattributes, set them by CSS (widthandbackground-color)
- 不使用
center标签（已弃用） - 不要使用
width,bgcolor属性，通过 CSS (width和background-color)设置它们
(assuming that you can control the table that was rendered)
（假设您可以控制渲染的表格）
回答by James Lawruk
You can prevent tables from expanding beyond their parent div by using table-layout:fixed.
您可以使用table-layout:fixed.
The CSS below will make your tables expand to the width of the div surrounding it.
下面的 CSS 将使您的表格扩展到它周围 div 的宽度。
table
{
table-layout:fixed;
width:100%;
}
I found this trick here.
我在这里找到了这个技巧。
回答by questzen
A crude work around is to set display: tableon the containing div.
一个粗略的解决方法是display: table在包含的 div 上设置。
回答by Mr. Doomsbuster
I tried all the solutions mentioned above, then did not work. I have 3 tables one below the other. The last one over flowed. I fixed it using:
我尝试了上面提到的所有解决方案，然后没有用。我有 3 张桌子，一张在另一张下面。最后一张溢出来了。我使用以下方法修复它：
/* Grid Definition */
table {
word-break: break-word;
}
For IE11 in edge mode, you need to set this to word-break:break-all
对于边缘模式的 IE11，您需要将其设置为 word-break:break-all
回答by Sander Koedood
At first I used James Lawruk's method. This however changed all the widths of the td's.
起初我使用了 James Lawruk 的方法。然而，这改变了td's 的所有宽度。
The solution for me was to use white-space: normalon the columns (which was set to white-space: nowrap). This way the text will always break. Using word-wrap: break-wordwill ensure that everything will break when needed, even halfway through a word.
我的解决方案是white-space: normal在列上使用（设置为white-space: nowrap）。这样，文本将始终中断。使用word-wrap: break-word将确保在需要时一切都会中断，即使是在一个单词中途。
The CSS will look like this then:
CSS 将如下所示：
td, th {
white-space: normal; /* Only needed when it's set differntly somewhere else */
word-wrap: break-word;
}
This might not always be the desirable solution, as word-wrap: break-wordmight make your words in the table illegible. It will however keep your table the right width.
这可能并不总是理想的解决方案，因为word-wrap: break-word可能会使您在表格中的话难以辨认。但是，它会使您的桌子保持正确的宽度。
回答by Waheed Asghar
I tried almost all of above but did not work for me ... The following did
我几乎尝试了以上所有方法，但对我不起作用......以下是
word-break: break-all;
This to be added on the parent div (container of the table .)
这要添加到父 div（表的容器）上。
回答by Christian Heath
overflow-x: auto;
overflow-y : hidden;
Apply the styling above to the parent div.
将上面的样式应用到父 div。
回答by dale
There's a width="400"on the table, remove it and it will work...
width="400"桌子上有一个，把它拿掉，它会起作用……
