Tabela transbordando fora de div

Estou tentando impedir que uma tabela com largura declarada explicitamente transborde fora de seu pai div. Presumo que posso fazer isso de alguma forma usando max-width, mas não consigo fazer isso funcionar.

O código a seguir (com uma janela muito pequena) causará isso:

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

A linha vermelha é a borda direita do dive, se você diminuir a janela do navegador, verá que a tabela não cabe nela.

Vire ao contrário fazendo:

<style type="text/css">
  #middlecol {
    border-right: 2px solid red;
    width: 45%;
  }

  #middlecol table {
    max-width: 400px;
    width: 100% !important;
  }
</style>

Também o aconselharia a:

• Não use a centertag (ela está obsoleta)
• Não use width, bgcoloratributos, defini-los por CSS ( widthe background-color)

(assumindo que você pode controlar a tabela que foi renderizada)

Você pode evitar que as tabelas se expandam além de seu div pai usando table-layout:fixed.

O CSS abaixo fará com que suas tabelas se expandam para a largura da div que as cerca.

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

Eu encontrei esse truque aqui .

Uma solução bruta é definir display: tableo div que o contém.

Tentei todas as soluções mencionadas acima, mas não funcionou. Tenho 3 tabelas uma abaixo da outra. O último transbordou. Consertei usando:

/* Grid Definition */
table {
    word-break: break-word;
}

Para o IE11 no modo de borda, você precisa definir isso para word-break:break-all

No começo, usei o método de James Lawruk. No entanto, isso mudou todas as larguras do td's.

A solução para mim foi usar white-space: normalnas colunas (que foi definido como white-space: nowrap). Dessa forma, o texto sempre vai quebrar. O uso word-wrap: break-wordgarantirá que tudo será interrompido quando necessário, mesmo no meio de uma palavra.

O CSS terá a seguinte aparência:

td, th {
    white-space: normal; /* Only needed when it's set differntly somewhere else */
    word-wrap: break-word;
}

Essa pode nem sempre ser a solução desejável, pois word-wrap: break-wordpode tornar suas palavras ilegíveis na tabela. No entanto, manterá sua mesa com a largura certa.

Tentei quase tudo acima, mas não funcionou para mim ... O seguinte funcionou

word-break: break-all;

Isso deve ser adicionado ao div pai (contêiner da tabela).

overflow-x: auto;
overflow-y : hidden;

Aplique o estilo acima ao div pai.

Tem um width="400"na mesa, retire e vai funcionar ...