title: Table overflowing outside of div
body: <p>I'm trying to stop a table that has width explicitly declared from overflowing outside of its parent <code>div</code>. I presume I can do this in some way using <code>max-width</code>, but I can't seem to get this working.</p>
  <p>The following code (with a very small window) will cause this:</p>
  <pre><code>&lt;style type=&quot;text/css&quot;&gt;
    #middlecol {
      width: 45%;
      border-right:2px solid red;
    }
    #middlecol table {
      max-width:100% !important;
    }
  &lt;/style&gt;
  
  &lt;div id=&quot;middlecol&quot;&gt;
    &lt;center&gt;
      &lt;table width=&quot;400&quot; cellpadding=&quot;3&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; align=&quot;center&quot;&gt;
        &lt;tr&gt;
          &lt;td bgcolor=&quot;#DDFFFF&quot; align=&quot;center&quot; colspan=&quot;2&quot;&gt;
            &lt;strong&gt;Notification!&lt;/strong&gt;
          &lt;/td&gt;
        &lt;tr&gt;
          &lt;td width=&quot;50&quot;&gt;
            &lt;img src=&quot;http://www.example.com/img.png&quot; width=&quot;50&quot; height=&quot;50&quot; alt=&quot;&quot; border=&quot;0&quot;&gt;
          &lt;/td&gt;
          &lt;td&gt;
            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.
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/center&gt;
   &lt;/div&gt;
  </code></pre>
  <p>The red line is the right border of the <code>div</code>, and if you make your browser window small, you'll see that the table doesn't fit into it.</p>