100% width table overflowing div container

Question

J'ai des problèmes avec un tableau 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'enrouler de manière à ce qu'ils s'insèrent correctement dans leur conteneur ? Je préférerais une méthode CSS uniquement, mais je suis également ouvert à l'utilisation de Javascript (ou jQuery) si c'est absolument nécessaire.

Answer 1

Mettez à jour votre CSS de la manière suivante : cela devrait résoudre le problème

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