ตารางความกว้าง 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) หากจำเป็นจริงๆ

จากมุมมอง "make it fit in the div" อย่างหมดจดให้เพิ่มสิ่งต่อไปนี้ในคลาสตารางของคุณ ( jsfiddle ):

table-layout: fixed;
width: 100%;

กำหนดความกว้างคอลัมน์ของคุณตามต้องการ มิฉะนั้นอัลกอริทึมการจัดวางคงที่จะกระจายความกว้างของตารางอย่างเท่าเทียมกันในคอลัมน์ของคุณ

สำหรับการอ้างอิงอย่างรวดเร็วนี่คืออัลกอริทึมเค้าโครงตารางของฉันที่เน้น:

• คงที่ (ที่มา )

  ด้วยอัลกอริทึม (เร็ว) นี้เค้าโครงแนวนอนของตารางไม่ได้ขึ้นอยู่กับเนื้อหาของเซลล์ ขึ้นอยู่กับความกว้างของตารางความกว้างของคอลัมน์และเส้นขอบหรือระยะห่างของเซลล์เท่านั้น

• อัตโนมัติ (ที่มา )

  ในอัลกอริทึมนี้ (ซึ่งโดยทั่วไปต้องใช้ไม่เกินสองรอบ) ความกว้างของตารางจะถูกกำหนดโดยความกว้างของคอลัมน์[ตามที่กำหนดโดยเนื้อหา] (และการแทรกแซงเส้นขอบ )
  
  [... ] อัลกอริทึมนี้อาจไม่มีประสิทธิภาพเนื่องจากต้องใช้ตัวแทนผู้ใช้เพื่อเข้าถึงเนื้อหาทั้งหมดในตารางก่อนที่จะกำหนดเค้าโครงสุดท้ายและอาจต้องการมากกว่าหนึ่งครั้ง

คลิกผ่านไปยังเอกสารที่มาเพื่อดูข้อมูลเฉพาะสำหรับแต่ละอัลกอริทึม

ลองเพิ่ม

word-break: break-all 

ไปที่ CSS บนองค์ประกอบตารางของคุณ

ซึ่งจะทำให้คำในเซลล์ตารางแตกเพื่อไม่ให้ตารางขยายกว้างกว่าที่มี div แต่คอลัมน์ของตารางยังคงมีขนาดแบบไดนามิก สาธิต jsfiddle

เพิ่มdisplay: block;และการoverflow: auto; .my-tableวิธีนี้จะเป็นการตัดสิ่งที่280pxเกินขีด จำกัด ที่คุณบังคับ ไม่มีทางที่จะทำให้มัน "ดูสวย" ที่มีความต้องการว่าเนื่องจากคำพูดเช่นไม่ได้ซึ่งมีความกว้างมากกว่าpélagosthrough280px

ลองเพิ่มในtd:

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

tds ที่ล้นจะสอดคล้องกับแถวใหม่

ดีได้รับข้อ จำกัด ของคุณผมคิดว่าการตั้งค่าoverflow: scroll;บน.pagediv น่าจะเป็นตัวเลือกของคุณเท่านั้น 280 px ค่อนข้างแคบและด้วยขนาดตัวอักษรของคุณการตัดคำเพียงอย่างเดียวจะไม่ทำ บางคำยาวแค่พันไม่ได้ คุณสามารถลดขนาดฟอนต์ของคุณลงอย่างมากหรือใช้ overflow: scroll

อัปเดต CSS ของคุณเป็นสิ่งต่อไปนี้ควรแก้ไข

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