Meja lebar 100% meluap wadah div

Saya mengalami masalah dengan tabel html yang meluap wadah induknya.

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

Bagaimana saya bisa memaksa teks header dan teks sel tabel untuk membungkus dengan cara yang sesuai dengan wadahnya? Saya lebih suka metode CSS saja, tetapi saya juga terbuka untuk menggunakan Javascript (atau jQuery) jika benar-benar diperlukan.

Dari perspektif "membuatnya pas di div", tambahkan berikut ini ke kelas tabel Anda ( jsfiddle ):

table-layout: fixed;
width: 100%;

Tetapkan lebar kolom Anda seperti yang diinginkan; jika tidak, algoritma tata letak tetap akan mendistribusikan lebar tabel secara merata di seluruh kolom Anda.

Untuk referensi cepat, berikut adalah algoritma tata letak tabel, milikku:

• Diperbaiki ( sumber )

  Dengan algoritma (cepat) ini, tata letak tabel secara horizontal tidak bergantung pada isi sel; itu hanya tergantung pada lebar tabel, lebar kolom, dan batas atau jarak sel.

• Otomatis ( sumber )

  Dalam algoritma ini (yang umumnya membutuhkan tidak lebih dari dua lintasan), lebar tabel diberikan oleh lebar kolomnya [, sebagaimana ditentukan oleh konten] (dan batas-batas yang mengintervensi ).
  
  [...] Algoritma ini mungkin tidak efisien karena membutuhkan agen pengguna untuk memiliki akses ke semua konten dalam tabel sebelum menentukan tata letak akhir dan mungkin menuntut lebih dari satu laluan.

Klik hingga dokumentasi sumber untuk melihat spesifik untuk setiap algoritma.

Coba tambahkan

word-break: break-all 

ke CSS pada elemen tabel Anda.

Itu akan membuat kata-kata dalam sel tabel untuk pecah sehingga tabel tidak tumbuh lebih luas dari yang mengandung div, namun kolom tabel masih berukuran secara dinamis. demo jsfiddle .

Tambah display: block;dan overflow: auto;ke .my-table. Ini hanya akan memotong apa pun yang melewati 280pxbatas yang Anda paksakan. Tidak ada cara untuk membuatnya "terlihat cantik" dengan persyaratan itu karena kata-kata seperti pélagosthroughyang lebih luas dari 280px.

Coba tambahkan ke td:

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

meluap tds akan sejajar dengan baris baru.

Nah, mengingat kendala Anda, saya pikir pengaturan overflow: scroll;pada .pagediv mungkin satu-satunya pilihan Anda. 280 px cukup sempit, dan mengingat ukuran font Anda, pembungkus kata saja tidak akan melakukannya. Beberapa kata hanya panjang dan tidak bisa dibungkus. Anda dapat mengurangi ukuran font secara drastis atau menggunakan overflow: scroll.

perbarui CSS Anda sebagai berikut: ini harus diperbaiki

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