Tabelle außerhalb von Div überfüllt

Ich versuche, eine Tabelle zu stoppen, deren Breite explizit als nicht überlaufend außerhalb der übergeordneten Tabelle deklariert wurdediv. Ich nehme an, ich kann das irgendwie mit tunmax-width, aber ich kann das scheinbar nicht zum Laufen bringen.

Der folgende Code (mit einem sehr kleinen Fenster) verursacht dies:

<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>

Die rote Linie ist der rechte Rand desdivund wenn Sie Ihr Browserfenster klein machen, werden Sie feststellen, dass die Tabelle nicht hineinpasst.

Antworten auf die Frage(7)

Ihre Antwort auf die Frage