Recipiente div transbordando da tabela de largura de 100%

Estou tendo problemas com uma tabela html que está transbordando seu contêiner pai.

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

Como forçar o texto do cabeçalho e o texto da célula da tabela a serem agrupados de forma que caibam no seu contêiner corretamente? Eu preferiria um método somente CSS, mas também estou aberto a usar Javascript (ou jQuery), se for absolutamente necessário.

De uma perspectiva puramente "ajuste à div", adicione o seguinte à sua classe de tabela ( jsfiddle ):

table-layout: fixed;
width: 100%;

Defina as larguras da coluna conforme desejado; caso contrário, o algoritmo de layout fixo distribuirá a largura da tabela uniformemente pelas colunas.

Para referência rápida, aqui estão os algoritmos de layout da tabela, ênfase minha:

• Fixo ( origem )

  Com esse algoritmo (rápido), o layout horizontal da tabela não depende do conteúdo das células; depende apenas da largura da tabela, da largura das colunas e das bordas ou espaçamento das células.

• Automático ( origem )

  Neste algoritmo (que geralmente requer não mais que duas passagens), a largura da tabela é dada pela largura de suas colunas [, conforme determinado pelo conteúdo] (e pelas bordas intermediárias ).
  
  [...] Esse algoritmo pode ser ineficiente, pois exige que o agente do usuário tenha acesso a todo o conteúdo da tabela antes de determinar o layout final e pode exigir mais de uma passagem.

Clique na documentação de origem para ver as especificações de cada algoritmo.

Tente adicionar

word-break: break-all 

para o CSS no seu elemento de tabela.

Isso fará com que as palavras nas células da tabela sejam quebradas, de forma que a tabela não cresça mais do que sua div que contém, mas as colunas da tabela ainda são dimensionadas dinamicamente. demonstração do jsfiddle .

Adicione display: block;e overflow: auto;para .my-table. Isso simplesmente cortará qualquer coisa além do 280pxlimite que você aplicou. Não há como torná-lo "bonito" com esse requisito devido a palavras como as pélagosthroughque são mais amplas que 280px.

Tente adicionar a td:

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

tds transbordados serão alinhados com a nova linha.

Bem, dadas as suas restrições, acho que definir overflow: scroll;a .pagediv provavelmente é sua única opção. 280 px é bastante estreito e, dado o tamanho da fonte, o agrupamento de palavras por si só não é suficiente. Algumas palavras são longas e não podem ser quebradas. Você pode reduzir drasticamente o tamanho da fonte ou usar o excesso: rolar.

atualize seu CSS para o seguinte: isso deve corrigir

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