表在div之外溢出

我试图阻止一个表，该表的宽度已显式声明，而不是从其父外部溢出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>

我也建议您：

• 不使用center标签（已弃用）
• 不要使用width，bgcolor属性，而是通过CSS（width和background-color）进行设置

（假设您可以控制呈现的表）

您可以使用阻止表扩展到其父div之外table-layout:fixed。

下面的CSS将使您的表格扩展到其周围的div宽度。

table 
{
    table-layout:fixed;
    width:100%;
}

我在这里找到了这个技巧。

粗略的解决方法是display: table在包含div上进行设置。

我尝试了上述所有解决方案，但是没有用。我下面有3张桌子。最后一个溢出了。我使用以下方法修复了它：

/* Grid Definition */
table {
    word-break: break-word;
}

对于处于边缘模式的IE11，您需要将此设置为 word-break:break-all

最初，我使用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;
}

这可能并不总是理想的解决方案，因为word-wrap: break-word这会使表中的单词变得难以辨认。但是，它将使您的桌子保持正确的宽度。

我尝试了以上几乎所有方法，但对我没有用。

word-break: break-all;

这将添加到父div（表的容器。）

overflow-x: auto;
overflow-y : hidden;

将上述样式应用于父div。

width="400"桌子上有一个，将其移开即可使用...