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

最初はジェームス・ローラックの方法を使いました。ただし、これによりの幅がすべて変更されました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"テーブルの上にがあり、それを削除すると動作します...