Tableau débordant en dehors de div

Question

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 le faire d'une manière ou d'une autre en utilisant max-width, mais je n'arrive pas à faire fonctionner cela.

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

<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 rendez votre fenêtre de navigateur petite, vous verrez que le tableau ne s'y adapte pas.

Answer 1

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 vos tables s'étendre à la largeur de la div qui l'entoure.

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

J'ai trouvé ce truc ici.

Answer 2

Une solution de rechange brute consiste à définir display: table sur le div contenant.

Answer 3

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

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

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

Answer 4

Faites demi-tour 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 balise center (c'est obsolète)
• N'utilisez pas les attributs width bgcolor, définissez-les par CSS (width et background-color)

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