Desbordamiento de tabla fuera de Div

Question

Estoy tratando de detener una tabla que tiene ancho declaradamente declarado no desbordamiento 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) causará 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 de la div, y si usted hace su pequeña ventana del navegador, verá que la mesa no encaja en ella

Answer 1

darle 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 le aconsejo a:

• No usar la etiqueta center (que está en desuso)
• No utilice width, bgcolor atributos , configúrelos por CSS (width y background-color)

(suponiendo que se puede controlar la tabla que se rindió)

Answer 2

Hay una width="400" sobre la mesa, y eliminar y funcionará ...

Answer 3

Una obra crudo alrededor es establecer display: table en el div que contiene .

Answer 4

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

El siguiente CSS hará que sus tablas se expandan al ancho del div que lo rodea.

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

He encontrado este truco here.

Answer 5

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

La solución para mí fue utilizar white-space: normal en las columnas (que se estableció en white-space: nowrap). De esta manera, el texto siempre se romperá. El uso de word-wrap: break-word asegurará 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; 
} 

esto podría no ser siempre la solución deseable, ya que word-wrap: break-word podría hacer que sus palabras en la tabla ilegible. Sin embargo mantendrá su mesa con el ancho correcto.

Answer 6

Probé todas las soluciones mencionadas anteriormente, y luego no funcionó. Tengo 3 tablas una debajo de la otra. El último fluyó.Me fijo usando:

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

Para EI11 en el modo de borde, es necesario establecer esto en word-break:break-all

Answer 7

Probé casi todos los anteriores, pero no funcionó para mí ... La siguiente hizo

word-break: break-all; 

Este que se añade en el div padre (contenedor de la mesa.)