[解決済み] 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 )

(レンダリングされたテーブルを制御できることを前提に)