表溢出到 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，如果您将浏览器窗口变小，您会发现表格不适合它。

您可以使用以下方法防止表扩展到其父 div 之外table-layout:fixed.

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

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

我发现了这个技巧here http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/.