100% Breite Tabelle überfüllt div Container

Ich habe Probleme mit einer HTML-Tabelle, deren übergeordneter Container überfüllt ist.

.page {
    width: 280px;
    border:solid 1px blue;
}

.my-table {
    word-wrap: break-word; 
}

.my-table td {
    border:solid 1px #333;
}

<div class="page">
    <table class="my-table">
        <tr>
            <th>Header Text</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th>Header Text</th>
        </tr>
        <tr>
            <td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td>
        </tr>
    </table>    
</div>

Wie kann ich erzwingen, dass sowohl der Kopfzeilentext als auch der Tabellenzellentext so umbrochen werden, dass er ordnungsgemäß in den Container passt? Ich würde eine reine CSS-Methode bevorzugen, bin aber auch offen für die Verwendung von Javascript (oder jQuery), wenn dies unbedingt erforderlich ist.

Fügen Sie Ihrer Tabellenklasse ( jsfiddle ) aus einer rein "fit it in the div" -Perspektive Folgendes hinzu :

table-layout: fixed;
width: 100%;

Stellen Sie Ihre Spaltenbreiten wie gewünscht ein. Andernfalls verteilt der feste Layoutalgorithmus die Tabellenbreite gleichmäßig auf Ihre Spalten.

Zum schnellen Nachschlagen sind hier die Tabellenlayout-Algorithmen aufgeführt, Hervorhebung von mir:

• Behoben ( Quelle )

  Bei diesem (schnellen) Algorithmus hängt das horizontale Layout der Tabelle nicht vom Inhalt der Zellen ab. Dies 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 Durchgänge erfordert) wird die Breite der Tabelle durch die Breite ihrer Spalten [, wie durch den Inhalt bestimmt] (und dazwischenliegende Ränder ) angegeben.
  
  [...] Dieser Algorithmus ist möglicherweise ineffizient, da der Benutzeragent vor der Festlegung des endgültigen Layouts Zugriff auf den gesamten Inhalt der Tabelle haben muss und möglicherweise mehr als einen Durchgang benötigt.

Klicken Sie sich durch die Quelldokumentation, um die Details für jeden Algorithmus anzuzeigen.

Versuchen Sie es hinzuzufügen

word-break: break-all 

zum CSS auf Ihrem Tabellenelement.

Dadurch werden die Wörter in den Tabellenzellen so unterbrochen, dass die Tabelle nicht breiter als das enthaltende div wird, die Tabellenspalten jedoch weiterhin dynamisch dimensioniert werden. jsfiddle Demo .

In display: block;und overflow: auto;um .my-table. Dadurch wird einfach alles abgeschnitten, was über das 280pxvon Ihnen erzwungene Limit hinausgeht. Es gibt keine Möglichkeit, es mit dieser Anforderung "hübsch aussehen" zu lassen, da Wörter wie pélagosthroughdiese breiter als sind 280px.

Versuchen Sie Folgendes hinzuzufügen td:

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

Übergelaufene tds werden an der neuen Zeile ausgerichtet.

Nun, angesichts Ihrer Einschränkungen denke ich, dass die Einstellung overflow: scroll;des .pageDiv wahrscheinlich Ihre einzige Option ist. 280 px sind ziemlich schmal, und angesichts Ihrer Schriftgröße reicht ein Zeilenumbruch allein nicht aus. Einige Wörter sind nur lang und können nicht umbrochen werden. Sie können entweder Ihre Schriftgröße drastisch reduzieren oder mit Überlauf gehen: scrollen.

Aktualisieren Sie Ihr CSS auf Folgendes: Dies sollte behoben sein

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