表溢出以外的部门
我试图阻止宽度明确宣布不溢出它的父div外面的表。 我认为我可以使用max-width以某种方式做到这一点，但我似乎无法得到这个工作。
下面的代码（有一个非常小的窗口）会导致这个：
<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>
红线是div的右边框，如果您将浏览器窗口变小，则会看到表格不适合。
转过来做：
<style type="text/css"> #middlecol { border-right: 2px solid red; width: 45%; } #middlecol table { max-width: 400px; width: 100% !important; } </style>
另外我会build议你：
- 不使用
center标签（已弃用） - 不要使用
width，bgcolor属性，通过CSS（width和background-color）
（假设你可以控制渲染的表）
您可以通过使用table-layout:fixed来防止表扩展到父div之外。
下面的CSS将使您的表扩展到围绕它的div的宽度。
table { table-layout:fixed; width:100%; }
我在这里find了这个技巧。
粗略的工作是在包含div上设置display: table 。
起初我用James Lawruk的方法。 然而这改变了td的所有宽度。
对我来说，解决方法是在列上使用white-space: normal （设置为white-space: nowrap ）。 这样，文本将会一直中断。 使用word-wrap: break-word将确保在需要的时候，一切都会中断，甚至在一个字的中途。
CSS将如下所示：
td, th { white-space: normal; /* Only needed when it's set differntly somewhere else */ word-wrap: break-word; }
这可能并不总是理想的解决scheme，因为word-wrap: break-word可能会让你的单词难以辨认。 然而，它会保持你的桌子正确的宽度。
我尝试了上面提到的所有解决scheme，然后没有工作。 我有三张桌子，一张在另一张下面。 最后一个stream了过来。 我用下面的方法修复了
/* Grid Definition */ table { word-break: break-word; }
对于边缘模式下的IE11，您需要将其设置为分word-break:break-all
有一个width="400"在桌子上，删除它，它会工作…
