Tavolo straripante fuori div

Sto provando a fermare una tabella con una larghezza dichiarata esplicitamente dall'overflow al di fuori del suo genitore div. Presumo di poterlo fare in qualche modo usando max-width, ma non riesco a farlo funzionare.

Il seguente codice (con una finestra molto piccola) causerà questo:

<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 linea rossa è il bordo destro del div, e se riduci la finestra del browser, vedrai che la tabella non ci sta.

Giralo facendo:

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

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

Inoltre ti consiglio di:

• Non utilizzare il centertag (è deprecato)
• Non utilizzare width, bgcolorgli attributi, li fissato dal CSS ( widthe background-color)

(supponendo che tu possa controllare la tabella che è stata renderizzata)

Puoi impedire alle tabelle di espandersi oltre il loro div genitore utilizzando table-layout:fixed.

Il CSS sottostante farà espandere le tue tabelle alla larghezza del div che le circonda.

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

Ho trovato questo trucco qui .

Una soluzione approssimativa è impostare display: tableil div contenitore.

Ho provato tutte le soluzioni sopra menzionate, quindi non ha funzionato. Ho 3 tavoli uno sotto l'altro. L'ultimo traboccava. L'ho risolto usando:

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

Per IE11 in modalità edge, è necessario impostarlo su word-break:break-all

All'inizio ho usato il metodo di James Lawruk. Questo tuttavia ha cambiato tutte le larghezze di td's.

La soluzione per me era usare white-space: normalsulle colonne (che era impostata su white-space: nowrap). In questo modo il testo si romperà sempre. L'utilizzo word-wrap: break-wordfarà in modo che tutto si rompa quando necessario, anche a metà di una parola.

Il CSS sarà così allora:

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

Questa potrebbe non essere sempre la soluzione desiderabile, in quanto word-wrap: break-wordpotrebbe rendere illeggibili le tue parole nella tabella. Tuttavia, manterrà il tuo tavolo della giusta larghezza.

Ho provato quasi tutto quanto sopra ma non ha funzionato per me ... Quanto segue ha funzionato

word-break: break-all;

Questo da aggiungere al div genitore (contenitore della tabella.)

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

Applica lo stile sopra al div genitore.

Ce n'è un width="400"sul tavolo, rimuovilo e funzionerà ...