100% width table overflowing div container [duplicate]

This question already has answers here: Table overflowing outside of div (12 answers) Closed 2 years ago.

I am having issues with an html table that is overflowing it's parent container.

.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>
    开发者_JAVA百科        <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>

How can I force both the header text and the table cell text to wrap in a way that it will fit in its container properly? I would prefer a CSS only method, but am also open to using Javascript (or jQuery) if absolutely necessary.

---

From a purely "make it fit in the div" perspective, add the following to your table class (jsfiddle):

table-layout: fixed;
width: 100%;

Set your column widths as desired; otherwise, the fixed layout algorithm will distribute the table width evenly across your columns.

For quick reference, here are the table layout algorithms, emphasis mine:

• Fixed (source)

  With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.

• Automatic (source)

  In this algorithm (which generally requires no more than two passes), the table's width is given by the width of its columns [, as determined by content] (and intervening borders).
  
  [...] This algorithm may be inefficient since it requires the user agent to have access to all the content in the table before determining the final layout and may demand more than one pass.

Click through to the source documentation to see the specifics for each algorithm.

---

Try adding

word-break: break-all 

to the CSS on your table element.

That will get the words in the table cells to break such that the table does not grow wider than its containing div, yet the table columns are still sized dynamically. jsfiddle demo.

---

Add display: block; and overflow: auto; to .my-table. This will simply cut off anything past the 280px limit you enforced. There's no way to make it "look pretty" with that requirement due to words like pélagosthrough which are wider than 280px.

---

Try adding to td:

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

overflowed tds will align with new row.

---

Well, given your constraints, I think setting overflow: scroll; on the .page div is probably your only option. 280 px is pretty narrow, and given your font size, word wrapping alone isn't going to do it. Some words are just long and can't be wrapped. You can either reduce your font size drastically or go with overflow: scroll.

---

update your CSS to the following: this should fix

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