html - etiqueta - Tabla desbordante fuera de Div

div id html

Question

Intento detener una tabla cuyo ancho ha declarado explícitamente que no se desborda fuera de su div principal. 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 del div , y si haces que la ventana de tu navegador sea pequeña, verás que la tabla no encaja en ella.

Answer 1

Al principio usé 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: normal en las columnas (que se estableció en white-space: nowrap en white-space: nowrap ). De esta manera, el texto siempre se romperá. Usando el word-wrap: break-word asegurará que todo se rompa cuando sea necesario, incluso a la mitad de una palabra.

El CSS se verá así luego:

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

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

Answer 2

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 etiqueta center (está en desuso)
• No use atributos width , bgcolor , bgcolor por CSS ( width y background-color )

(suponiendo que pueda controlar la tabla que se procesó)

Answer 3

Hay un width="400" en la mesa, quítelo y funcionará ...

Answer 4

Intenté casi todo lo anterior pero no funcionó para mí ... Lo siguiente hizo

word-break: break-all;

Esto para ser agregado en el div principal (contenedor de la tabla).

Answer 5

Intenté todas las soluciones mencionadas anteriormente y luego no funcionó. Tengo 3 tablas una debajo de la otra. El último fluyó. Lo arreglé usando:

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

Para IE11 en modo de borde, necesita configurar esto para word-break:break-all

Answer 6

Puede evitar que las tablas se expandan más allá de su div principal mediante el uso de 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%;
}

Encontré este truco here .

Answer 7

Un trabajo aproximado es establecer display: table en el div que contiene.