Conteneur div débordant de table 100% largeur

J'ai des problèmes avec une table html qui déborde de son conteneur parent.

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

Comment puis-je forcer le texte de l'en-tête et le texte de la cellule du tableau à s'habiller de manière à ce qu'ils tiennent correctement dans son conteneur? Je préférerais une méthode CSS uniquement, mais je suis également ouvert à l'utilisation de Javascript (ou jQuery) si cela est absolument nécessaire.

Du point de vue purement "adapter le div", ajoutez ce qui suit à votre classe de table ( jsfiddle ):

table-layout: fixed;
width: 100%;

Définissez vos largeurs de colonne comme vous le souhaitez; sinon, l'algorithme de mise en page fixe distribuera la largeur du tableau uniformément sur vos colonnes.

Pour une référence rapide, voici les algorithmes de mise en page des tableaux, je souligne:

• Fixe ( source )

  Avec cet algorithme (rapide), la disposition horizontale du tableau ne dépend pas du contenu des cellules; cela ne dépend que de la largeur du tableau, de la largeur des colonnes et des bordures ou de l'espacement des cellules.

• Automatique ( source )

  Dans cet algorithme (qui ne nécessite généralement pas plus de deux passes), la largeur du tableau est donnée par la largeur de ses colonnes [, comme déterminé par le contenu] (et les bordures intermédiaires ).
  
  [...] Cet algorithme peut être inefficace car il nécessite que l'agent utilisateur ait accès à tout le contenu de la table avant de déterminer la mise en page finale et peut exiger plusieurs passes.

Cliquez sur la documentation source pour voir les spécificités de chaque algorithme.

Essayez d'ajouter

word-break: break-all 

au CSS sur votre élément de table.

Cela permettra aux mots des cellules du tableau de se briser de sorte que le tableau ne s'élargisse pas plus que son div contenant, mais les colonnes du tableau sont toujours dimensionnées de manière dynamique. Démo jsfiddle .

Ajouter display: block;et overflow: auto;à .my-table. Cela coupera simplement tout ce qui dépasse la 280pxlimite que vous avez imposée. Il n'y a aucun moyen de le rendre "joli" avec cette exigence en raison de mots comme pélagosthroughqui sont plus larges que 280px.

Essayez d'ajouter à td:

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

Le tds débordé s'alignera sur la nouvelle ligne.

Eh bien, compte tenu de vos contraintes, je pense que le réglage overflow: scroll;sur le .pagediv est probablement votre seule option. 280 px est assez étroit, et étant donné la taille de votre police, le retour à la ligne seul ne suffira pas. Certains mots sont simplement longs et ne peuvent pas être enveloppés. Vous pouvez soit réduire considérablement la taille de votre police, soit opter pour le débordement: scroll.

mettez à jour votre CSS comme suit: cela devrait corriger

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