web-dev-qa-db-fra.com

Table débordant à l'extérieur de la div

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

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 s’y glisse pas.

htmlcsshtml-table
81
waiwai933

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>

Aussi je vous conseillerais de:

  • N'utilisez pas la balise center (elle est obsolète)
  • N'utilisez pas les attributs width, bgcolor, définissez-les par CSS (width et background-color)

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

21
Zyphrax

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

Le CSS ci-dessous va élargir vos tableaux à la largeur de la div qui l’entoure.

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

J'ai trouvé cette astuce ici .

187
James Lawruk

Un travail rudimentaire consiste à définir display: table sur le div contenant.

62
questzen

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

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

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

29
Mr. Doomsbuster

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

La solution pour moi était d'utiliser white-space: normal sur les colonnes (qui était réglé sur white-space: nowrap). De cette façon, le texte sera toujours brisé. En utilisant Word-wrap: break-Word s'assurera que tout se brisera au besoin, même à mi-chemin d'une Parole.

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 Word-wrap: break-Word pourrait rendre vos mots illisibles dans le tableau. Il gardera toutefois votre table à la bonne largeur.

12
Sander Koedood

J'ai essayé la quasi-totalité des solutions ci-dessus, mais cela n'a pas fonctionné pour moi ...

Word-break: break-all;

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

2
Waheed Asghar