Contenedor div de desbordamiento de tabla 100%

Tengo problemas con una tabla html que desborda su contenedor principal.

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

¿Cómo puedo forzar que tanto el texto del encabezado como el texto de la celda de la tabla se ajusten de manera que quepan en su contenedor correctamente? Preferiría un método solo de CSS, pero también estoy abierto a usar Javascript (o jQuery) si es absolutamente necesario.

Desde una perspectiva puramente "hacer que encaje en el div", agregue lo siguiente a su clase de tabla ( jsfiddle ):

table-layout: fixed;
width: 100%;

Establezca los anchos de columna como desee; de lo contrario, el algoritmo de diseño fijo distribuirá el ancho de la tabla de manera uniforme en sus columnas.

Para una referencia rápida, aquí están los algoritmos de diseño de tabla, el énfasis es mío:

• Fijo ( fuente )

  Con este algoritmo (rápido), el diseño horizontal de la tabla no depende del contenido de las celdas; solo depende del ancho de la tabla, el ancho de las columnas y los bordes o el espacio entre celdas.

• Automático ( fuente )

  En este algoritmo (que generalmente no requiere más de dos pasadas), el ancho de la tabla viene dado por el ancho de sus columnas [, según lo determinado por el contenido] (y los bordes intermedios ).
  
  [...] Este algoritmo puede ser ineficiente ya que requiere que el agente de usuario tenga acceso a todo el contenido de la tabla antes de determinar el diseño final y puede exigir más de una pasada.

Haga clic en la documentación de origen para ver los detalles de cada algoritmo.

Intenta agregar

word-break: break-all 

al CSS en su elemento de tabla.

Eso hará que las palabras en las celdas de la tabla se rompan de manera que la tabla no crezca más de lo que contiene el div, sin embargo, las columnas de la tabla todavía tienen un tamaño dinámico. jsfiddle demo .

Agregar display: block;y overflow: auto;para .my-table. Esto simplemente cortará cualquier cosa que supere el 280pxlímite que usted impuso. No hay forma de hacer que "se vea bonita" con ese requisito debido a palabras como las pélagosthroughque son más amplias que 280px.

Intenta agregar a td:

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

los tds desbordados se alinearán con una nueva fila.

Bueno, dadas sus limitaciones, creo que configurar overflow: scroll;el .pagediv es probablemente su única opción. 280 px es bastante estrecho, y dado su tamaño de fuente, el ajuste de palabras solo no lo hará. Algunas palabras son largas y no se pueden envolver. Puede reducir drásticamente el tamaño de la fuente o ir con desbordamiento: desplazamiento.

actualice su CSS a lo siguiente: esto debería solucionar

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