Tabela DIV przepełniona o 100% szerokości

Mam problemy z tabelą html, która przepełnia swój kontener nadrzędny.

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

Jak mogę wymusić zawijanie zarówno tekstu nagłówka, jak i tekstu komórki tabeli w taki sposób, aby pasował prawidłowo do kontenera? Wolałbym tylko metodę CSS, ale jestem również otwarty na użycie JavaScript (lub jQuery), jeśli jest to absolutnie konieczne.

Z perspektywy „dopasuj to do elementów div” dodaj do swojej klasy tabeli ( jsfiddle ):

table-layout: fixed;
width: 100%;

Ustaw żądane szerokości kolumn; w przeciwnym razie algorytm o stałym układzie rozłoży szerokość tabeli równomiernie na kolumny.

Dla szybkiego odniesienia, oto algorytmy układu tabeli, nacisk mój:

• Naprawiono ( źródło )

  Dzięki temu (szybkiemu) algorytmowi poziomy układ tabeli nie zależy od zawartości komórek; zależy to tylko od szerokości tabeli, szerokości kolumn i obramowań lub odstępów między komórkami.

• Automatyczny ( źródło )

  W tym algorytmie (który generalnie wymaga nie więcej niż dwóch przebiegów), szerokość tabeli jest określona przez szerokość jej kolumn [zgodnie z zawartością] (i granic między nimi ).
  
  [...] Ten algorytm może być nieefektywny, ponieważ wymaga od agenta użytkownika dostępu do całej zawartości tabeli przed określeniem ostatecznego układu i może wymagać więcej niż jednego przebiegu.

Kliknij dokumentację źródłową, aby zapoznać się ze szczegółami dla każdego algorytmu.

Spróbuj dodać

word-break: break-all 

do CSS w elemencie tabeli.

Dzięki temu słowa w komórkach tabeli będą łamane w taki sposób, że tabela nie będzie rosła szerzej niż zawiera element div, ale kolumny tabeli nadal będą miały dynamiczny rozmiar. jsfiddle demo .

Dodaj display: block;i overflow: auto;do .my-table. Spowoduje to po prostu odcięcie wszystkiego, co przekracza 280pxnarzucony limit. Nie ma sposobu, aby „ładnie wyglądać” przy tym wymaganiu ze względu na takie słowa, pélagosthroughktóre są szersze niż 280px.

Spróbuj dodać do td:

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

przepełnione tds zostaną wyrównane z nowym wierszem.

Biorąc pod uwagę twoje ograniczenia, myślę, że ustawienie overflow: scroll;na .pagediv jest prawdopodobnie jedyną opcją. 280 pikseli jest dość wąski, a biorąc pod uwagę rozmiar czcionki, samo zawijanie słów nie wystarczy. Niektóre słowa są po prostu długie i nie można ich zawinąć. Możesz drastycznie zmniejszyć rozmiar czcionki lub zastosować przepełnienie: przewiń.

zaktualizuj swój CSS do następującego: to powinno naprawić

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