Tisch läuft über außerhalb von div

Ich versuche zu verhindern, dass eine Tabelle, deren Breite explizit deklariert wurde, außerhalb ihres übergeordneten Elements überläuft div. Ich nehme an, ich kann dies auf irgendeine Weise mit tun max-width, aber ich kann nicht scheinen, dass dies funktioniert.

Der folgende Code (mit einem sehr kleinen Fenster) verursacht dies:

<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>

Die rote Linie ist der rechte Rand von. divWenn Sie Ihr Browserfenster klein machen, sehen Sie, dass die Tabelle nicht hineinpasst.

Drehen Sie es um, indem Sie Folgendes tun:

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

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

Auch würde ich Ihnen raten:

• Verwenden Sie das centerTag nicht (es ist veraltet)
• Verwenden Sie keine width, bgcolorAttribute, setzen sie durch CSS ( widthund background-color)

(vorausgesetzt, Sie können die gerenderte Tabelle steuern)

Mit können Sie verhindern, dass Tabellen über das übergeordnete Div hinaus erweitert werden table-layout:fixed.

Mit dem folgenden CSS werden Ihre Tabellen auf die Breite des sie umgebenden Div erweitert.

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

Ich habe diesen Trick hier gefunden .

Eine grobe Umgehung besteht darin, display: tableauf das enthaltende Div zu setzen.

Ich habe alle oben genannten Lösungen ausprobiert und dann nicht funktioniert. Ich habe 3 Tabellen untereinander. Der letzte floss über. Ich habe es behoben mit:

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

Für IE11 im Edge-Modus müssen Sie dies einstellen word-break:break-all

Zuerst habe ich James Lawruks Methode angewendet. Dies änderte jedoch alle Breiten der td.

Die Lösung für mich war die Verwendung white-space: normalfür die Spalten (die auf eingestellt war white-space: nowrap). Auf diese Weise wird der Text immer unterbrochen. Durch word-wrap: break-worddie Verwendung wird sichergestellt, dass bei Bedarf alles kaputt geht, auch nach der Hälfte eines Wortes.

Das CSS sieht dann so aus:

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

Dies ist möglicherweise nicht immer die wünschenswerte Lösung, da word-wrap: break-wordIhre Wörter in der Tabelle möglicherweise unleserlich werden. Dadurch bleibt Ihr Tisch jedoch in der richtigen Breite.

Ich habe fast alles oben versucht, aber es hat bei mir nicht funktioniert ... Das Folgende hat funktioniert

word-break: break-all;

Dies wird dem übergeordneten div (Container der Tabelle) hinzugefügt.

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

Wenden Sie das obige Styling auf das übergeordnete Div an.

Es ist ein width="400"auf dem Tisch, entfernen Sie es und es wird funktionieren ...