wake-up-neo.com

Div-Container mit 100% Breitenüberlauf

Ich habe Probleme mit einer HTML-Tabelle, die den übergeordneten Container überläuft. Ich habe a sample jsfiddle hier eingerichtet, um das Problem darzustellen. 

Wie erzwinge ich, dass sowohl der Kopfzeilentext als auch der Tabellenzellentext so umbrochen werden, dass er richtig in den Container passt? Ich würde eine reine CSS-Methode vorziehen, kann aber auch Javascript (oder jQuery) verwenden, wenn dies unbedingt erforderlich ist.

htmlcsshtml-table
99
Victor

Fügen Sie Ihrer Tabellenklasse ( jsfiddle ) Folgendes aus einer rein "passen Sie es in die div" -Perspektive ein:

table-layout: fixed;
width: 100%;

Stellen Sie die Spaltenbreite wie gewünscht ein. Andernfalls verteilt der Algorithmus mit festem Layout die Tabellenbreite gleichmäßig auf Ihre Spalten.

Hier finden Sie die Tabellenlayout-Algorithmen mit folgenden Schwerpunkten:

  • Feste ( Quelle )
    Mit diesem (schnellen) Algorithmus wird die horizontale Anordnung der Tabelle bestimmt hängt nicht vom Inhalt ab der Zellen; es hängt nur von der Breite der Tabelle, der Breite der Spalten und den Rändern oder dem Zellenabstand ab.
  • Automatisch ( Quelle )
    Bei diesem Algorithmus (der im Allgemeinen nicht mehr als zwei Durchläufe erfordert) ist die Tabellenbreite durch die Spaltenbreite angegeben [inhaltlich bestimmt] (und dazwischenliegende Grenzen ).

    [...] Dieser Algorithmus ist möglicherweise ineffizient, da der Benutzeragent vor dem Festlegen des endgültigen Layouts Zugriff auf den gesamten Inhalt der Tabelle haben muss und möglicherweise mehr als einen Durchlauf erfordert.

Klicken Sie sich durch die Quellendokumentation, um die Besonderheiten für jeden Algorithmus anzuzeigen.

197
canon

Versuchen Sie das Hinzufügen 

Word-break: break-all

an das CSS in Ihrem Tabellenelement. 

Dadurch werden die Wörter in den Tabellenzellen gebrochen, so dass die Tabelle nicht breiter wird als das enthaltende div, während die Tabellenspalten immer noch dynamisch dimensioniert werden. jsfiddle Demo .

43
Jon Schneider

Fügen Sie display: block; und overflow: auto; zu .my-table hinzu. Dadurch wird alles abgeschnitten, was über dem von Ihnen erzwungenen 280px-Grenzwert liegt. Es gibt keine Möglichkeit, es mit dieser Anforderung "schön aussehen" zu lassen, da Wörter wie pélagosthrough breiter als 280px sind.

15
David Titarenco

Versuchen Sie, zu td hinzuzufügen:

display: -webkit-box; // to make td as block
Word-break: break-Word; // to make content justify

übergelaufene tds werden an der neuen Zeile ausgerichtet.

1
usernaveen

Nun, angesichts Ihrer Einschränkungen denke ich, dass es wahrscheinlich die einzige Option ist, overflow: scroll; für .page div einzustellen. 280 px ist ziemlich schmal, und wenn Sie die Schriftgröße verwenden, wird Word Wrapping alleine dies nicht tun. Einige Wörter sind nur lang und können nicht eingepackt werden. Sie können entweder die Schriftgröße drastisch reduzieren oder mit Überlauf gehen: Bildlauf.

0
Peter Lyons

aktualisieren Sie Ihr CSS folgendermaßen: Dies sollte behoben werden

.page {
    width: 280px;
    border:solid 1px blue;
    overflow-x: auto;
}
0
Sugeng Sulistiyawan