100% ширина таблиці переповнює контейнер Div

У мене виникають проблеми із таблицею html, яка переповнює її батьківський контейнер.

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

Як я можу змусити і текст заголовка, і текст комірки таблиці загортати таким чином, щоб він належним чином помістився в контейнер? Я б віддав перевагу лише методу CSS, але я також відкритий для використання Javascript (або jQuery), якщо це абсолютно необхідно.

З точки зору суто "зробіть це вмістом у діві " додайте до таблиці таблиці ( jsfiddle ):

table-layout: fixed;
width: 100%;

Встановіть потрібні ширини стовпців; в іншому випадку алгоритм фіксованого компонування буде розподіляти ширину таблиці рівномірно по ваших стовпцях.

Для швидкого ознайомлення, ось алгоритми компонування таблиці, міна акцентів:

• Виправлено ( джерело )

  При такому (швидкому) алгоритмі горизонтальне розташування таблиці не залежить від вмісту комірок; це залежить лише від ширини таблиці, ширини стовпців, меж або міжряддя.

• Автоматичний ( джерело )

  У цьому алгоритмі (який, як правило, вимагає не більше двох проходів), ширина таблиці задається шириною її стовпців [, як визначено вмістом] (і меж інтервалів ).
  
  [...] Цей алгоритм може бути неефективним, оскільки він вимагає, щоб користувальницький агент мав доступ до всього контенту таблиці перед тим, як визначити остаточний макет, і може вимагати більше одного проходу.

Перейдіть до вихідної документації, щоб побачити особливості кожного алгоритму.

Спробуйте додати

word-break: break-all 

до CSS вашого елемента таблиці.

Таким чином, слова в клітинках таблиці будуть розбиті таким чином, що таблиця не зростає ширше, ніж вміщує роздільник, але стовпці таблиці все ще мають динамічний розмір. jsfiddle демо .

Додати display: block;і overflow: auto;в .my-table. Це просто відріже все, що 280pxперевищує встановлений вами межа. Немає способу зробити це "красивим" з такою вимогою завдяки словам, на кшталт pélagosthroughяких ширше 280px.

Спробуйте додати до td:

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

переповнений tds вирівняється з новим рядком.

Ну, враховуючи ваші обмеження, я думаю, що встановлення overflow: scroll;на .pageдіві - це, мабуть, єдиний варіант. 280 пікселів досить вузький, а враховуючи розмір вашого шрифту, введення тексту самостійно не збирається цього робити. Деякі слова просто довгі і їх неможливо завернути. Можна або різко зменшити розмір шрифту, або перейти з переповненням: прокручування.

оновіть свій CSS до наступного: це має виправити

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