La tabla se desborda fuera de div

Estoy tratando de evitar que una tabla que tiene un ancho declarado explícitamente se desborde fuera de su padre div. Supongo que puedo hacer esto de alguna manera usando max-width, pero parece que no puedo hacer que esto funcione.

El siguiente código (con una ventana muy pequeña) provocará esto:

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

La línea roja es el borde derecho del div, y si hace que la ventana de su navegador sea pequeña, verá que la tabla no encaja en ella.

Dale la vuelta haciendo:

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

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

También te aconsejaría que:

• No use la centeretiqueta (está obsoleta)
• No use width, bgcoloratributos, configúrelos por CSS ( widthy background-color)

(asumiendo que puede controlar la tabla que fue renderizada)

Puede evitar que las tablas se expandan más allá de su div principal usando table-layout:fixed.

El CSS a continuación hará que sus tablas se expandan al ancho del div que lo rodea.

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

Encontré este truco aquí .

Una burda solución es establecer display: tableel div contenedor.

Probé todas las soluciones mencionadas anteriormente, luego no funcionó. Tengo 3 tablas una debajo de la otra. El último se desbordó. Lo arreglé usando:

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

Para IE11 en modo de borde, debe configurarlo en word-break:break-all

Al principio utilicé el método de James Lawruk. Sin embargo, esto cambió todos los anchos de los td.

La solución para mí fue usar white-space: normalen las columnas (que estaba configurado en white-space: nowrap). De esta forma el texto siempre se romperá. El uso word-wrap: break-wordasegurará que todo se rompa cuando sea necesario, incluso a la mitad de una palabra.

El CSS se verá así entonces:

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

Es posible que esta no sea siempre la solución deseable, ya que word-wrap: break-wordpodría hacer que sus palabras en la tabla sean ilegibles. Sin embargo, mantendrá su mesa con el ancho correcto.

Probé casi todo lo anterior pero no funcionó para mí ... Lo siguiente sí

word-break: break-all;

Esto se agregará en el div principal (contenedor de la tabla).

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

Aplica el estilo de arriba al div padre.

Hay un width="400"sobre la mesa, quítalo y funcionará ...