Contenitore div traboccante di tavoli di larghezza 100%

Sto riscontrando problemi con una tabella HTML che sta traboccando il suo contenitore padre.

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

Come posso forzare sia il testo dell'intestazione che il testo della cella della tabella in modo che si adattino correttamente al suo contenitore? Preferirei un metodo solo CSS, ma sono anche aperto all'utilizzo di Javascript (o jQuery) se assolutamente necessario.

Da una prospettiva puramente "adatta alla div", aggiungi quanto segue alla tua classe di tabella ( jsfiddle ):

table-layout: fixed;
width: 100%;

Imposta le larghezze delle colonne come desiderato; in caso contrario, l'algoritmo di layout fisso distribuirà uniformemente la larghezza della tabella tra le colonne.

Per un rapido riferimento, ecco gli algoritmi di layout della tabella, enfasi il mio:

• Risolto ( fonte )

  Con questo algoritmo (veloce), il layout orizzontale della tabella non dipende dal contenuto delle celle; dipende solo dalla larghezza della tabella, dalla larghezza delle colonne e dai bordi o dalla spaziatura delle celle.

• Automatico ( fonte )

  In questo algoritmo (che generalmente richiede non più di due passaggi), la larghezza della tabella è data dalla larghezza delle sue colonne [, come determinato dal contenuto] (e dai bordi intermedi ).
  
  [...] Questo algoritmo potrebbe essere inefficiente poiché richiede all'agente utente di accedere a tutto il contenuto della tabella prima di determinare il layout finale e può richiedere più di un passaggio.

Fai clic sulla documentazione di origine per vedere le specifiche di ciascun algoritmo.

Prova ad aggiungere

word-break: break-all 

al CSS sull'elemento della tabella.

Ciò farà sì che le parole nelle celle della tabella si spezzino in modo tale che la tabella non si allarghi rispetto al div contenente, ma le colonne della tabella vengono comunque ridimensionate in modo dinamico. demo di jsfiddle .

Aggiungi display: block;e overflow: auto;a .my-table. Questo semplicemente taglierà qualsiasi cosa oltre il 280pxlimite che hai imposto. Non c'è modo di renderlo "bello" con questo requisito a causa di parole come pélagosthroughquelle più ampie di 280px.

Prova ad aggiungere a td:

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

tds traboccato si allineerà con la nuova riga.

Bene, dati i tuoi vincoli, penso che l'impostazione overflow: scroll;sul .pagediv sia probabilmente la tua unica opzione. 280 px è piuttosto stretto e, date le dimensioni del carattere, il ritorno a capo automatico da solo non lo farà. Alcune parole sono solo lunghe e non possono essere racchiuse. Puoi ridurre drasticamente la dimensione del carattere o andare in overflow: scorri.

aggiorna il tuo CSS al seguente: questo dovrebbe risolvere

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