Table débordant en dehors de div

J'essaie d'empêcher une table dont la largeur est explicitement déclarée de déborder en dehors de son parent div. Je suppose que je peux faire cela d'une certaine manière en utilisant max-width, mais je n'arrive pas à faire fonctionner cela.

Le code suivant (avec une très petite fenêtre) provoquera ceci:

<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 ligne rouge est la bordure droite du div, et si vous réduisez la fenêtre de votre navigateur, vous verrez que le tableau ne rentre pas dedans.

Retournez-le en faisant:

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

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

Je vous conseille également de:

• Ne pas utiliser la centerbalise (elle est obsolète)
• Ne pas utiliser width, les bgcolorattributs, les définir en CSS ( widthet background-color)

(en supposant que vous puissiez contrôler la table qui a été rendue)

Vous pouvez empêcher les tables de s'étendre au-delà de leur div parent en utilisant table-layout:fixed.

Le CSS ci-dessous fera étendre vos tableaux à la largeur du div qui l'entoure.

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

J'ai trouvé cette astuce ici .

Une solution rudimentaire consiste à définir display: tablele div contenant.

J'ai essayé toutes les solutions mentionnées ci-dessus, puis je n'ai pas fonctionné. J'ai 3 tableaux l'un en dessous de l'autre. Le dernier a débordé. Je l'ai corrigé en utilisant:

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

Pour IE11 en mode Edge, vous devez le définir sur word-break:break-all

Au début, j'ai utilisé la méthode de James Lawruk. Cela a cependant changé toutes les largeurs des td's.

La solution pour moi était d'utiliser white-space: normalsur les colonnes (qui était réglé sur white-space: nowrap). De cette façon, le texte se cassera toujours. L'utilisation word-wrap: break-wordgarantira que tout se cassera en cas de besoin, même à mi-chemin d'un mot.

Le CSS ressemblera alors à ceci:

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

Ce n'est peut-être pas toujours la solution souhaitable, car cela word-wrap: break-wordpourrait rendre vos mots dans le tableau illisibles. Cela gardera cependant votre table à la bonne largeur.

J'ai essayé presque tout ce qui précède mais cela n'a pas fonctionné pour moi ...

word-break: break-all;

Ceci à ajouter sur le div parent (conteneur de la table.)

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

Appliquez le style ci-dessus à la division parent.

Il y a un width="400"sur la table, retirez-le et cela fonctionnera ...