Lösung für den Überlauf der HTML-Tabelle

Wenn die Tabelle breit ist, kann es zu einem Überlauf kommen.

Beispielsweise gibt es zwei Divs, links und rechts. Befindet sich die Tabelle im rechten Div, ist diese jedoch breiter, besteht die Möglichkeit, dass sie nicht im rechten Div, sondern weiter unten angezeigt wird. An dieser Stelle müssen Sie lediglich die Breite der Tabelle angeben:

Beheben Sie das Problem, dass der Inhalt in der HTML-Tabelle keine Zeilenumbrüche erzwingt und Auslassungspunkte automatisch ausblendet und anzeigt, wenn er die Breite überschreitet

Beim Tabellenlayout treten häufig Situationen auf, in denen das Layout aufgrund von Änderungen in der Länge des Tabelleninhalts chaotisch ist. Zu diesem Zeitpunkt können wir die Zellenbreite für die Layoutstabilität auf einen festen Wert einstellen. Wenn wir jedoch die Breite einstellen, stellen wir fest, dass sie nach Überschreiten der Breite automatisch zunimmt. Auch die Verwendung von CSS zum Definieren des overflow:hidden;-Attributs des Elements funktioniert nicht. Die endgültige Lösung lautet wie folgt:

Tisch{
   
    table-layout:fixed;/* Die folgende td-Definition funktioniert nur, wenn der Tabellenlayout-Algorithmus als fest definiert ist. */
}
td{
    Breite: 100 %;
    Wortumbruch:alles behalten;/* Kein Zeilenumbruch*/
    white-space:nowrap;/* Kein Zeilenumbruch*/
    overflow:hidden;/*Überschüssigen Inhalt ausblenden, wenn der Inhalt die Breite überschreitet*/
    text-overflow:ellipsis; /* Zeigt ein Auslassungszeichen (...) an, wenn der Text innerhalb eines Objekts überläuft; muss zusammen mit overflow:hidden; verwendet werden. */
}

Wenn Sie befürchten, dass Sie nach dem Ausblenden nicht den gesamten Zelleninhalt sehen können, empfiehlt es sich, der Zelle den Attributwert „title“ hinzuzufügen, also den gesamten Zelleninhalt. Auf diese Weise können Sie alles anzeigen, solange Sie mit der Maus darüber fahren.